I built a website that utilizes a background video (.mp4) and have just realized that it sometimes won't play in certain browsers. I was wondering if there is a way I can add supporting file types so if one doesn't display, the next one will be playing instead.
I have the video in 3 file formats (.ogg/.ogv?), (.mp4) and (.webm) which, looking at caniuse seems that between the 3, will all be supported. My question is, can I just add the video into the html as another source to accomplish this 'fail safe' approach I'm going after?
This is how I have my video player set up:
<video autoplay loop class="fillWidth">
<source src="" type="video/mp4" width="1024" height="768" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
<img src="" alt="">
</div>
I use the video tag with the source attribute to load in the video and a .png for a poster in case the user is in mobile, can I just add 2 more video tags with each different source, or is there a more elegant way to accomplish this?
Like this:
<source src="" type="video/ogv" width="1024" height="768" />
<source src="" type="video/webm" width="1024" height="768" />
I appreciate the help!
Just use a single video tag and multiple source tags. The browser will choose the proper source.
Ex:
<video autoplay loop class="fillWidth">
<source src="vid.mp4" type="video/mp4" width="1024" height="768" />
<source src="vid.ogv" type="video/ogv" width="1024" height="768" />
<source src="vid.webm" type="video/webm" width="1024" height="768" />
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
I hope I am not that late. Here is the solution I got, I tested it in Chrome, Firefox, Microsoft Edge, Opera Mini, and Internet Explora. It Works in all
<video controls width="250">
<source src="/media/examples/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
Enjoy!
Related
i am using this code to play a video in a wordpress website.
the code workes perfectly in all browsers but in chrome controls are disable and the video is not playing.
any where else but that site the code works in chrome.
changing the theme and disabling plugins did not solve the problem.i have changed the code and the format of videos several times but nothing works on that.
<video width="320" height="240" controls="controls">
<source src=" test.mp4" type="video/mp4" />;
<source src=" test.ogv" type="video/ogg" />;
<source src=" test.webm" type="video/webm" />;
</video>
well, the problem really was ssl.
I just activated ssl on my download host and the video played nice and easy.
thank you so much for your hint rank. if this link was not: https://w3schools.com/html/tryit.asp?filename=tryhtml5_video
i still was searching for the problem on my website.
Have you already tried eding the syntax?
You should definately delete the semicolons after the source tags. This is Html, not a javascript code, so there should be no semicolons.
Also you can set the boolean attribute of controls with giving no value, simply put the "controls" inside the tags.
Give this a try, maybe it solves your problem with chrome:
<video width="320" height="240" controls>
<source src=" test.mp4" type="video/mp4" />
<source src=" test.ogv" type="video/ogg" />
<source src=" test.webm" type="video/webm" />
</video>
I know this has been answered, but a note on your source files. Browsers select the first file they "know how to play".
Since every browser that supports video also supports mp4, you'll never actually see any playback of the ogg or webm versions of the video. I would suggest:
<video width="320" height="240" controls>
<source src=" test.webm" type="video/webm" />
<source src=" test.ogv" type="video/ogg" />
<source src=" test.mp4" type="video/mp4" />
</video>
(and since webm and ogg fully overlap - you can probably save yourself from creating the ogg files altogether)
Problem with playing video on Chrome. Programs work fine on Firefox, Opera and Safari and once (I think) worked fine on Chrome. The past discussions do not help me. Here is a link:
http://faculty.purchase.edu/jeanine.meyer/html5/chooselocation.html
The html5 markup is similar for the 3 videos, but the 1st and 2nd do not work and the 3rd one does!
This script: http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html
contains code for checking that the videos are loaded but does not play them.
Please help me.
Change the source ordering for your different formats.
For example, you're currently rendering the following for one of your videos:
<video id="fire" loop="loop" preload="auto" controls="controls" style="display: block;">
<source src="sfire3.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="sfire3.theora.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="sfire3.webmvp8.webm" type="video/webm; codec='vp8, vorbis'">
Your browser does not accept the video tag.
</video>
Swap the placement of the first and last <source> elements:
<video id="fire" loop="loop" preload="auto" controls="controls" style="display: block;">
<source src="sfire3.webmvp8.webm" type="video/webm; codec='vp8, vorbis'">
<source src="sfire3.theora.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="sfire3.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Your browser does not accept the video tag.
</video>
I have a video tag looking like this:
<video width="380px" height="190px" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
This plays the video in Firefox and Chrome. However, IE9 and 10 simply states unreadable source (the video 'box' itself turns up so the tag is supported). Safari doesnt seem to support the video tag and thus I only see my fallback message. However, if I go to the URL directly in any browser I can watch the movie in Firefox + Chrome and download it in IE + Safari.
What should I do to make the video playable in all browsers?
Add this line in your head somewhere.
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
Also try putting your source in the opening video tag.
<video source src="movie.mp4" type="video/mp4" width="380px" height="190px" controls></video>
Hope fully that helps
I usually have four versions of the same video for cross-browser compatibly:
<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.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked well for me cross-browser. Another thing to note is that for mobile, a higher-optimised .mp4 video is more likely to work (I've had issues with this in the past).
Is it necessary to specify codecs like so in html5 video :
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="pr6.mp4" />
</video>
Or is it ok to simply do the following :
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type="video/webm" />
<source src="pr6.ogv" type="video/ogg" />
<source src="pr6.mp4" />
</video>
The last method seems to work fine in browsers, what is the benefit of the first method? This info is taken from http://diveintohtml5.info/video.html which also should have the mp4 video first in the list for iDevices.
No! You just have to make sure to use the supported codecs for the browsers in which your page will be rendered. The browser will ignore the ones it doesn't understand till finds the codec it understands.
Straight from MDN, codecs help browsers make more intelligent decisions, but it's optional
Source
Its provide security for cross-browser sniffing when it decodes..
Read this article:
http://en.wikipedia.org/wiki/HTML5_video
I am new to working with videos and what i'm trying to accomplish is putting a video on my site. I have been researching and havent found to much, any help would be very much appreciated. Here is what I have so far.
<embed "images/K36U21TR.wmv" width="300" height="300" />
My preffered method is to upload the video to YouTube and place it on your site using their embed code which is an iframe tag.
This provides the benefit of your users using YouTube's bandwidth when they are watching the video rather than yours.
Alternatively you could look at using the HTML5 VIDEO tag.
http://www.w3schools.com/tags/tag_video.asp
<video width="300" height="300" controls>
<source src="images/K36U21TR.wmv" type="video/wmv">
</video>
video tag : (Supprot : IE, Firefox, Chrome, Opera, Safari)
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
embed tag : (Supprot : IE, Firefox, Chrome, Opera, Safari)
<embed src="helloworld.swf">