I can't seem to get the HTML5 video working on the latest version of Mozilla Firefox. It's working on Internet Explorer, Chrome and Safari. Here's the source code
<video id="video" muted autoplay poster="uploads/toaf-video.jpg" controls loop="loop">
<source src="uploads/toaf2014.mp4" type="video/mp4" />
</video>
Thanks,
Try supplying multiple formats to overcome format compatibility differences in different browsers.
<video id="video" muted autoplay poster="uploads/toaf-video.jpg" controls loop="loop">
<source src="uploads/toaf2014.mp4" type="video/mp4">
<source src="uploads/toaf2014.ogg" type="video/ogg">
<source src="uploads/toaf2014.webm" type="video/webm" />
Your browser does not support HTML5 video.
</video>
Why Different formats?
Firefox 3.5+, Opera 10.5+ and Chrome 3+ support ogv
Firefox 4+, Opera 10.6+ and Chrome 6+ support WebM (and ogv,
assuming they don’t drop support in future)
Or Use the flash video to support all major browsers.
Looks like I just had an additional format OGV and WebM.
Related
I have created a mp4 video and called it in the below html5 video tag as follows
<video width="100%" autoplay="" loop="">
<source src="http://beta.jointviews.com/testbytes/wp-content/themes/zerif-lite/videos/testbytes.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
the video works fine in mozilla and chrome but not in safari and mobile devices specially on androids and ipod,ipads{i could check only in these)
i have read in the link that safari supports mp4 but it is not
here is the fiddle
http://jsfiddle.net/Lqaro0vr/
In the below code the video is working on ie, chrome and mozilla
But the video is not supporting on mobile
What is the solution friends help me:
<video width="400" height="360" autoplay loop>
<source src="http://www.example.co.in/videos/trytek.mp4" type="video/mp4">
<source src="http://www.example.co.in/videos/trytek.ogg" type="video/ogg">
</video>
Which mobile OS (and version), and which mobile browser (and version) are you using?
1) Not all video types are supported by all mobile browsers:
HTML5 Video Element Browser Support
2) You may require special handling to run the video:
Android < 2.3 HTML5 Video handling
Let me know how it goes.
<video controls>
<source src="video.mp4" type="video/mp4">
<object>
...
</object>
</video>
This HTML5 video tag with a mp4 video and a Flash fallback works in every single browser all over, except from Opera on PC.
But if I move the "object" out of "video", it will work - so that means Flash is properly installed and working.
Is there a solution to this, or do I have to make some sort of a workaround by checking for browser and then displaying a pure Flash player for Opera?
The Flash fallback only works on old browsers that can't process the <video> element natively - but that doesn't include Opera. Opera tries to play your HTML5 media... and fails.
Your issue is that Opera can't play the mp4 file. Try adding a fallback webm version to support it:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<object>
...
</object>
</video>
I have a video player in HTML5, pretty simple.
<video width="470" height="265" preload="none" controls="controls" id="video_player" poster="assets/posters/finished_jk.jpg">
<source type="video/webm" src="assets/videos/finished_jk.webm"></source>
<source type="video/ogg" src="assets/videos/finished_jk.ogv"></source>
<source type="video/mp4" src="assets/videos/finished_jk.mp4"></source>
Your browser doesn't support videos
</video>
I have an issue with Firefox. When I click the play button, it's going directly to the end of the video.
It works with Chrome, Safari and Opera.
Thanks
The problem came from the encoder software I used.
I used "Miro Video Converter" to convert my mp4 video in webm format. I tried with another one and it works fine.
i have a video file (avi with avc+mp3). Is it possible to play this via the HTML5 video-tag?
i have tested it in Internet Explorer 9 but it will not work! Is it because the audio codec mp3 is not supported or is it the "video Codec-Profile "HighL3.0"?
Edited to fix misunderstanding
I suggest you do some reading about the ongoing codec wars, or look at this table. Basically, some browsers accept only videos with a MP4 container, H.264-encoded video, and AAC-encoded audio (low-complexity profile); some browsers accept only videos with a WebM container, VP8-encoded video, and ogg-vorbis-encoded audio.
MP4/H.264 seems to be winning the war, but at the moment you'll need both for complete browser support.
Modern browsers which support <video> use WebM, MP4/H.264 and OGG video format. So you can't use AVI for HTML5 video. There is no unique format which is supported by all browsers. The only solution is to convert file to supported formats and use <video> like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <!-- IE, Chrome, Safari, Android -->
<source src="movie.ogg" type="video/ogg"> <!-- Firefox, Chrome, Opera -->
<source src="movie.webm" type="video/webm"> <!-- Firefox, Chrome, Opera, Android -->
Your browser does not support the video tag.
</video>