I'm trying to make a playlist using HTML5 video feature in the modern browsers.
The only way I found so far is to remove video tag then append it again with a different source like below..
$("second video link").click (function(){
$("#video wrapper").remove();
$("#video wrapper").append(" new video tags ");
});
I think there must be a better way...
the answer depends on what approach you like and what browsers you want to serve videos to. IE9 fails on the video.src() function if you supplied multiple sources via the source sub-elements. If you require only a single browser to work, check caniuse.com for webm and mp4 to see which browser supports which codec. In case you find out you need multiple codecs as your audience uses both mp4- and webm-only browsers you will have to do a check with .canPlayType() before using the .src() function and to eliminate sources that would fail (though this check is not bullet proof either). Android 2.2 (or was it 2.1, please correct me) does not know the funciotn at all. Some Mac OSX browsers have similar problems afaik.
bottom line: you should use a combo of canPlayType() to filter wrong sources, then use an array or any other sortable list to grab the next video source and set it once the "ended" event was fired by the video element using the src() function. I also like to set the type attribute of the video element when changing the source to circumvent quirks of some browsers.
possible types are: video/mp4 for mp4 and m4v files; video/webm for webm files; video/ogg for ogv files; either provide the type via some kind of server-side scripting or check for the file extension in JS and then do a switch() {...} or if else()...
You can get the extension easily via
var sourceExt = (sourceString.split(".")).pop();
where sourceString is a variable containing the url of your source
furthermore you should check browser specs to comply with their requirements for videos. iOS for instance requires mp4s to be encoded with baseline profile
Related
I want to show a video clip on my webpage.
I'm using the video tag but that doesn't show me the output.
I've attached two screenshots.
Please can someone tell me what's wrong with what I have done?
As mentioned in the comments, it seems quite possible this is due to a Firefox mp4/h.264 support issue.
There are actually some techniques you can use in your JavaScript to detect whether a video is playable and react accordingly - e.g. give the user a message or switch to a different video.
MediaSource.isTypeSupported()
The above will allow you do a check if a mime type is supported - it is 'experimental' so not supported by all browsers but is supported by Firefox 42.0 onwards. More info here:
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/isTypeSupported
H.264 codec support in Firefox is also a little confusing, I find, with different information in different places, but it certainly was the case and quite probably still is that support is reliant on the underlying system supporting the particular codec. Firefox does support a HTML5 mechanism that allows you to test at run time whether the video codec is supported:
function canPlayH264 () {
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
};
More information here (under 'Detecting Playback):
https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/H.264_support_in_Firefox
As an aside, in case it is not clear, there are multiple different H.264 codec variants. This can cause confusion as one H.264 encoded video may be supported on a particular client device and another not. There is a nice explanation of how to read the codec info in this answer:
https://stackoverflow.com/a/16365526/334402
I have a small snippet of code to play a video using HTML5. By accident, I discovered that it runs perfectly without a type attribute (the mime type) in my source element (see code below).
I thought that you always needed to provide the mime type, but apparently not. I've tried to google this, but with no luck. The code below works fine in both FireFox and Chrome. I have no other HTML5 supporting browsers installed. The video files used in my tests are local mp4 files and webm files using http. The result is the same; everything seemes to work fine without a mime type. Hence my question:
Is it perfectly safe to write this without the type attribute or did I miss anything here? (I don't need to support browsers older than IE11.)
Any information on the subject would be appreciated. Thanks.
<video id="videoControl1" width="600" controls poster="somepic.png">
<source id="videoSource1" src="somevideo.mp4"></source>
<object>
<p>Video is not supported</p>
</object>
</video>
Usually, browsers will detect the MIME type based on meta data and the incoming stream, I believe they do not even look at the file type anymore. You can see this in action by purposely renaming your video on a live webserver to the wrong extension, browsers and players will usually still play the video.
The only reference I could find on the subject is from a tutorial site (html5 rocks tutorials), quoting:
In some cases, the browser won't play the video if the MIME type isn't
set properly.
This was written in 2010, and they said "in some cases". It should be safe not to provide a mime type, although providing the wrong one may or may not cause it not to play.
I assume that this is possible, here is question, also on stackoverflow, that confirms it.
However I have failed while trying to make it work, so I'm asking for your help.
How can I do this?
WebM uses a variant of the Matroska container so it's not too surprising that some browsers are able to play some .mkv files. It's likely that you'd need to set the content type header to something that the browser recognises (eg. video/webm) if it was going to work at all.
However, that's only part of the story. The Matroska container is just that, a container. Inside the container are video and audio objects which have been encoded with particular codecs, if the browser you're attempting to play the file with doesn't support those codecs then they won't be able to play the file even if they can parse the container format. If you want wide compatibility then your best option is to transcode to one of the more common container/codec combinations such as MP4/h264 or WebM/VP8.
You wanna take a look at DivX player
Cut & paste
As of version 2.1, the DivX Plus Web Player supports the HTML5 API, so
it can be embedded and controlled using the tag and open web
standards such as JavaScript. It takes full advantage of the
tag’s attributes by allowing publishers to create seamless playback
experiences and custom controls for DivX, AVI, MKV, MP4 and MOV videos
across multiple browsers: Firefox and Chrome (Internet Explorer &
Safari Coming in full release version).
I have a OVG video and I would like to put that into my site. I do not know much about that file format so I am concerned how it will be with cross browser compatibility. I know that FF will play the file yet I am unsure about IE (I am only worrying about IE 8+)
What is the best way to put this file into my site? Should I use the HTML 5 <video> tag or should I use another format? I need this to work with IE 8 so I am unsure what the best route is.
Thanks!
You should use video element, with multiple source elements inside, each pointing to a different format of your .ovg file. you can generate cross-browser files at media.io or via Miro converter (download). the best way would be to degrade gracefully for older browsers, you'll want to provide some JavaScript, VideoJS is my preferred lib, you can use their embed builder tool, that'll provide the older fallbacks
For the best compatibility, you'll want to use a video hosting site and embed the Flash video into the site. If you want to host it yourself, you'll have to find a Flash video player that you can use, but I'm pretty sure most or all of those are commercial.
Otherwise you'll need to have both an H264 version (MP4) and an OGG version and include both versions in the source tag. You can then also include a fallback to a Flash embedded version.
You can find out more here.
I have created a very simple embed with fall-back code for all browsers. When test viewing in FF4 locally, the video appears and plays perfectly. But when I upload to a remote server (retaining the same file structure) the video does not appear. All other browsers seem to be displaying fine... You can see it here: http://www.selfdestruct.tv/h5/
Why?
Check your server and make sure that the mime types are defined for these video types. Not serving proper mime types with the file can stop many browsers from playing videos properly, the type attribute is simply not enough.
http://diveintohtml5.ep.io/video.html#video-mime-types is an excellent resource on HTML 5 video.
Besides mime types above, also check video file permissions.