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.
Related
I have looked everywhere online to try and solve this issue.
I have got the following code on my website which works fine on all browsers apart from Microsoft Edge, it simply says that the content is not supported, so it is recognising the video tag.
I'm displaying an MP4 video, codec: H.264, AAC
<video width="100%" controls id="slider-video">
<!-- <source src="img-src/{v2_FOLDER}/theme/GMS_Final.webm" type="video/webm"> -->
<source src="img-src/{v2_FOLDER}/theme/GMS_Final.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<p>Your browser does not support the video tag.</p>
</video>
As you can see, I have even tried using an webm but this also doesn't work... any ideas?
Updated Code:
<video width="100%" controls id="slider-video">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.webm" type="video/webm">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.mp4" type="video/mp4">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.m4v" type="video/m4v">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.ogg" type="video/ogg">
</video>
Make sure to use the correct MP4 compression with H264 codec (maximum 720p of resolution) with AC3 audio on it.
Edge is like browsers on iPad/iPhone and needs the same H264 compression style.
Drag and drop your mp4 video file to IE-Edge to play it directly from local file system. So you will be sure if your video correctly converted.
I have a user requirement to embed mp4 and flv in the website. I have not found any success with this.
I realised that
<video> </video>
does not do the magic.
Is there any other way?
HTML5 does not support .FLV files directly. You will need to convert the .FLV files or use a Flash Player. See the spec for more info
You can, however, embed a .swf file, I believe. See this SO question for more information there.
As for MP4 format, Firefox versions before v21 and Opera do not support it. Opera and older versions of Firefox both support WebM and Ogg Vorbis format for video, however.
To the best of my knowledge, Chrome doesn't support WMV. Opera, Firefox and Chrome support Ogg Theora+Vorbis, while Chrome and Safari support MPEG-4 H.264+AAC.
<video controls>
<source type="video/ogg; codecs=theora,vorbis" src="video.ogv">
<source src="video.wmv">
Your browser doesn't support video, you may download the
video instead: Ogg
</video>
The only browser that might be able to play WMV is Opera on Linux (if you happen to have the right GStreamer plugins installed). That's not very useful, so you should probably just not use WMV with at all.
You might find this useful reading: Everything you need to know about HTML5 video and audio.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
read more about this : http://www.w3schools.com/html/html_videos.asp
Why You Should Use the MP4 File Format Instead of FLV : http://www.techsmith.com/tutorial-camtasia-why-you-should-use-mp4.html
<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 website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls
On this site, the video doesn't play in FF. But it does play in Chrome. Is there anything I need to add?
<video width="580" height="318" controls poster="link to poster">
<source src="link to video">
Your browser does not support the HTML5 Video tag. Please update to a modern browser.
</video>
In your site's source:
<source src="/wp-content/themes/bigframe/media/bigframe_reel.mp4">
Firefox doesn't support mp4 videos for HTML5 video.
You can add additional sources (WebM, OGG), and fallback to a Flash player. See this table for compatibility.
You can solve the problem by providing video or audio encoded in different formats for different browsers.
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>