How to error handle html5 video + only mp4 source under old browsers.
Most of the browsers have support for html5 but not mp4. How to detect this and output an error for the user?
Keep in mind these things:
The client will use only mp4
The video element will be used multiple videos all mp4
Convertion mp4 to webmm/ogg is not a solution in this case
I need only a way to generate error for browsers that won't play the video. How to do this? Thanks!
You can use HTMLMediaElement.canPlayType() and get the value if your browser support mp4 or not.
var video = document.createElement('video');
console.log(video.canPlayType('video/mp4')); // "maybe"
Possible answers are:
'probably': The specified media type appears to be playable.
'maybe': Cannot tell if the media type is playable without playing it.
'' (empty string): The specified media type definitely cannot be played.
Hi you can handle it as below.
var videoSource1 = '<source src="//anc.com/video1.webm" type="video/webm"/>';
var videoSource2 = '<source src ="//abc.com/video2.mp4" type = "video/mp4"/>';
var videoSource = videoSource1 + videoSource2;
$('.video-container').append(videoSource);
The above code will detect any one of file on the basis of browser support.
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'm testing WebRTC API. More precisely the webcam part.
So I read the W3C draft and used it in firefox to record myself from a webpage. It works (not as good as expected, but it does). I mean that I can download a video formated as webm that is readable by my computer.
I want to previsualize my video before sending it to the server. So I madethis code:
var url = URL.createObjectURL(e.data);
video.innerHTML = '<source src="' + url + '" type="video/webm"></source>';
video.play();
This does'nt work at all. I got just a blank element on my webpage...
Any suggestion to make it work ?
The problem was an issue of Firefox. With e.data we get a blob but we have to redefine a new blob to make it work:
var new_blob = new Blob([e.data], { type: e.data.type });
Notice that for now (2014-09-30) firefox does not support officialy the video encoding and the specification is in draft that is not validated by the W3C.
the proble is I do not understand the what is the object you get in e.data, also you can check if the mime is correct console.log(e.data);;console.log(e.data.type); , what are the output of these,
also have you tried this, firefox webm capture, they show preview of the video.
I am currently working in using the HTML5 audio player to provide a audio stream (24/7 radio stream) via the (mobile) browser. Loading in the stream and playing it works fine.
The major problem is that the HTML5 <audio> tag will keep downloading (buffering) content even when its not active. This could be a major issue for mobile users since most of them pay for data use. So far I have not been able to find a decent solutions that works cross browser to prevent this.
I tried so far:
Unload the source when pause is pressed. < This does not work cross browser
Remove the audio player element and load a new one. This works but
lets be honest, this is a very hacky way of performing an extremely
simple task.
I was simply wondering if there is something I'm overlooking in this whole issue since I am convinced I'm not the only one with this issue.
The <audio> element includes a preload attribute. This can be set to "none" or "metadata" which should prevent the audio preloading.
Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
I found a workable solution for the problem described above. A detail description can be found here: https://stackoverflow.com/a/13302599/1580615
You can do the following to stop buffering load without errors:
var blob = new Blob([], {type: "audio/mp3"});
var url = URL.createObjectURL(blob);
audio.src = _url;
or, shortened up:
audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"});
Now you're not loading a "" which is a bad url for the audio tag to try and load. You're instead loading an actual url made from a Blob that just contains no data for the audio to playback.
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
I know how to check in Javascript if HTML5 audio playback is available. But how do I specifically check if MP3 audio playback is available, as IE9 and Chrome support it, while Firefox and Opera do not.
You could either check the User-Agent and see what browser is being used or you could test support with Javascript.
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
I got the above code from this page.
return !!(a.canPlayType) is better because (some recent versions of)Firefox not supports mp3 and a.canPlayType('audio/mpeg;') will be false
Modernizr is a library for feature detection. You can use it to do the work for you.
According to the documentation:
If audio support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, mp3, wav and m4a.
Important: The values of these properties are not true booleans. Instead, Modernizr matches the HTML5 spec in returning a string representing the browser's level of confidence that it can handle that codec. These return values are an empty string (negative response), "maybe" and "probably". The empty string is falsy, in other words: Modernizr.audio.ogg == '' and '' == false
var test_audio= document.createElement("audio") //try and create sample audio element
var test_video= document.createElement("video") //try and create sample video element
var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true : false}
alert("Audio Element support: " + mediasupport.audio + "\n"
+ "Video Element support: " + mediasupport.video
)