Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
Related
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
Every tutorial/explanation I see out there that discusses HTML5 video format fallbacks use this type of markup as an example:
<video autoplay>
<source src="/myvideo.mp4" type="video/mp4">
<source src="/myvideo.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>
So my question, why does everyone suggest to put the MP4 before the Webm format? If your browser supports Webm, it almost definitely supports MP4... The above markup essentially ensures that the more efficient Webm video will never be used, even though it has arguably better compression and will reduce bandwidth. Why is this?
Am I missing something about the way video fallbacks work?
It has to do with backwards compatibility with iOS 3 devices. iPads running iOS 3 had a bug that prevented them from noticing anything but the first video source listed.
MP4 video type was the only supported video format, so if the mp4 version of the video is not the first source, it is ignored.
So, if you want to deliver video to iPad owners who haven’t yet upgraded iOS, you will need to list your MP4 file first, followed by the rest of the video formats.
Read more
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
I have the following code:
<div class="span4">
<video poster="assets/img/poster.jpg" controls="controls" width="420" height="420">
<source src="assets/videos/152638831.webm" type="video/webm" />
<source src="assets/videos/152638831.mp4" type="video/mp4" />
</video>
</div>
The video works in both Firefox and chrome, but in Chrome, it's very very grainy. I don't think it's an issue with my video because when I navigate to http://www.w3schools.com/html/html5_video.asp using Chrome, the video under the section called "DOM Methods and Properties" also appears grainy. When i say grainy, I mean, I see yellow, green, blue and red lines / dashes spattered across the video.
Can you tell me what I'm doing wrong?
Also, is the idea behind having multiple source tags that depending on the browser, it will select which file to play? In my case, I know firefox doesn't support mp4... I tested it. but the above code works in firefox. So I'm assuming it's playing the webm version of the file. Is this correct?
Thanks.
First of all, Chrome should be able to read the mp4 so perhaps you didn't use h264 compression.
You should check on that.
Second, you must include compressed ogv, and webm versions of the video.
Each browser supports a different video format at the moment so we have to include them all so that no one gets left out.
Here is a handy chart for browser video format support :
http://www.longtailvideo.com/html5/#media_formats
Don't forget the flash fall-back either, just incase someone with a dinosaur browser that doesn't support the html5 video tag needs to see the video too.
Here is a handy chart for video tag support :
http://caniuse.com/video
Let us know how you get on.
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).