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
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.
Chrome says "This plugin isn't supported" even though I have both video formats. Strangely I can play HTML5 video on other websites (with the same computer/browser). I looked at the source and they have mp4 first then webm.
I tested the site with chrome from another computer and it works fine. Chrome is at the latest version on both computers.
Here is my code:
<video preload="auto" autoplay loop>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
<video preload="auto" autoplay loop muted>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
Add the muted attribute to the <video> tag.
As you explain your issue...Please check with your 'Chrome extension' in setting, it might be possible that you have any extension which is creating problem in playing the video.
Please try to stop all extensions and then try to run the page again. Hope it will work.
I would like to ask question about how to play a video on my browser. When I try to load my video file to my browser it displays nothing. My teacher said that maybe it is because the browser is not supported by html5.
What is your idea guys. I am hoping for your positive response.
you can try this one:
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
</body>
please Refer This pages
SEE THE PAGE
If your teacher say your browser doesn't support html5.
Try double check in your browser eg. if you using chrome
Go to Menu --> Setting --> About and if it say need to be updated then click update.
Chrome support with html5 tag. Really weird if it not.
More info can check here https://html5test.com/results/desktop.html
For the coding part
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
It work and i already do a test here the display
Hav you tried to use it by
video tag,
<video id="samp" src="sampvideo.mov" controls> </video>
this should it work
I'm having trouble with a video I'm using as a background -- it works correctly on firefox & chrome, however on Safari on load and when it loops, it flashes black for a moment.
Because it's looping the trick of having it fade in after won't work. I'm not really sure what's causing the issue. It's using a poster which loads correctly. the file is about 1.1mb.
Any ideas or solutions?
<video id="HeroVideo2" class="width100" loop="true" autoplay="true" preload="none" poster="/assets/videoposter.jpg">
<source src="/assets/hero.mp4" type="video/mp4">
<source src="/assets/hero.webm" type="video/webm">
<source src="/assets/her.ogv" type="video/ogg">
</video>
I have found that the issue was related to encoding in Handbrake.
I reencoded the video and made sure to check the "Web optimised" option and the new video no longer has the one or two back frames when viewed in Safari.
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.