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
Related
In the code below:
<video id="video" poster="images/poster.jpg" width="400" height="300" controls >
<source src="movies/clip.mov" type="video/quicktime">
<source src="movies/clip.webm" type="video/webm">
<source src="movies/clip.mp4" type="video/mp4">
<source src="movies/clip.ogg" type="video/ogg">
Get the MP4 version of the video.
</video>
What if the browser supports more than one of the formats I have provided? Like both webm and mp4, which one will be chosen?
They run in the order of the source elements.
https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
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)
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!
I'd like to use captions with an mp4 video downloaded from Youtube. I also used googlesrt2 to create an .srt file from the youtube link. This is the html I am using:
<video controls="controls" height="480" width="640">
<source type="video/mp4" src="video1.mp4" />
<track kind="captions" src="output1.srt" srclang="en">
</video>
Ironically, it works in all browsers sans the actual captions, except for IE where it doesn't work at all (I thought IE native was mp4!).
I'm rather frustrated and not sure how to fix this. Any help would be appreciated.
Solution : You have to use JS to sync subtitles with video track for all platforms.
<script src="http://www.storiesinflight.com/js_videosub/includes/videosub-0.9.9.js"></script>
<video width="320" height="240" controls>
<source src="https://mkvtoolnix.download/samples/vsshort-aac.mkv" type="video/mp4">
<track kind="captions" src="https://mkvtoolnix.download/samples/vsshort-en.srt" srclang="en">
</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).