I must start by saying I'm a newbie to html. I start from scratch and I try to do it the right way.
I've got a lot of help from stack overflow and most of my problems were solved by other's requests for help. But I don't seem to get an answer to a simple problem I got.
I've checked several answers to this problem, but none of it works for me.
MY PROBLEM: my videos only plays on Safari and at no other browser.
The most relevant post was the following: HTML5 video won't play in Chrome only
I tried the correct order and re-converting my files to mp4, ogg and webm using Miro converter but both didn't work. I added the codecs in to my code but this doesn't change anything. I added plays-inline as well from another relevant post but nothing...
My code is the following:
<!-- LANDING PAGE VIDEO - INTRO VIDEO -->
<video class="videoIntro" id="SiteIntro" autoplay="no-repeat" poster="VMF_MENU.png" plays-inline>
<source src="videos/Site_Intro.mp4" type="video/mp4">
<source src="videos/Site_Intro.webm" type="video/webm" codecs="vp8, vorbis">
<source src="videos/Site_Intro.m4v" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
<source src="videos/Site_Intro.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
I got no error messages (expected).
What do you suggest I try to correct this?
Thank you in advance!
Related
Attempting to get a basic short video looping but can't get it to work.
This is the code I'm attempting to use:
<video class="bg1" preload loop autoplay>
<source src="video/bg1.mp4" type='video/mp4' />
</video>
Thanks for any help.
Found what the issue was in my case. I am using WebStorm and was viewing the site in debug mode - when opening the site, either local or on my web server the video loops as it should.
I've been using Video.js to embed mp4 videos, it's a great player, thanks to everyone who develops and works on it. For the most part, it's working great, but I have a few small issues I need to figure out.
Here's one of the video pages; Columbia River Bass Fishing. It's mostly XHTML Transitional, I think mixing the HTML 5 in is causing some issues, especially with attribute values, but as long as it works, I'll figure out the details later. Here's the video.js code:
<video id="WAW_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="ColumbiaRiverSmallmouthBassFishing.jpg" data-setup='{"WAW_option":true}' >
<source src="ColumbiaRiverSmallmouthBassFishing.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" default />
Your browser does not support this video. Maybe you should update your internet browser
</video>
The video stuff works great in Firefox, Chrome and IE11, but no captions. The "captions.vtt" file is correct and IE10 will display the captions locally on my computer, but on the remote server there are no captions. I tried using the full URL location for the VTT file but that didn't work either.
A quick look at the coding on this page should tell you that I'm no expert, but I'd like to try and produce code that works and is compliant, so forgive the stupid questions.
Thanks in advance
Ron B
Change .vtt to .txt rule out if it's a MIME type issue with your web server config.
If you need to add web.config to your root, it needs to list .vtt as an acceptable MIME type.
I have a video file in MKV format, i want to play that file in the browser without converting, how can i play this file format in browser?
<video width="320" height="240" controls>
<source src="movie.mkv" type="video/mkv">
Your browser does not support the video tag.
</video>
i want this file to be played in full screen mode always. My browser is chrome.
It will refuse to play Matroska if the type attribute is set to video/x-matroska. Try removing the type attribute completely.
After some experimentation with this issue, I've found the best solution is to set the mime type to video/webm.
I think Chrome doesn't play .mkv videos.
By the way, 'type' is mime-type, and mkv's mime type is video/x-matroska.
Try:
source src="movie.mkv" type="video/x-matroska"
If this works, maybe the sound will be muted, so you can try type="video/mp4".
I added the IIS Mime Type as (.mkv - video/webm) over the IIS option and it worked fine.
If you want to use video with path .mkv
<!-- mkv -->
<video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
<video width="320" height="240" controls>
<source src="assets/animation.mp4" type="video/mp4" />
</video>
if you do not understand, click on link
Play Code
I'm stumped. After reading numerous blogs and posts regarding this, here is the code I compiled to get full browser support for my html 5 videos
<video width="686" height="284" poster="http://my_S3_file.png?preset=category-hero" autoplay loop>
<source src="http://my_S3_file.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://my_S3_file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://my_S3_file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<object width="686" height="284" src="http://my_S3_file.mp4">
<embed width="686" height="284" src="http://my_S3_file.swf" loop="false" wmode="transparent" ></embed>
</object>
</video>
Works great in Chrome (as always). However, Firefox and IE refuse to play. Whats even more strange, in firefox I can right-click on the video area and select view video, open the webm file in a new tab and view it in the browser. What is the deal!?
Kinda late response perhaps.
Have you set the correct MIME-types for the files when you uploaded them?
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.