search

Home >Web Front-end >H5 Tutorial >HTML5 video support detection (check whether the browser supports video playback)_html5 tutorial skills

HTML5 video support detection (check whether the browser supports video playback)_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:49:373225browse

Copy the code
The code is as follows:

More and more websites now have Provides video playback (not plug-in). HTML5 provides a standard for displaying video. So how to check whether your browser supports video playback? Let's write an example below.


Copy code
The code is as follows:





HTML 5 Video

Check whether your browser supports HTML5 videos:









The following is the js code:

Copy code
The code is as follows:

function checkVideo()
{
if(!!document.createElement('video ').canPlayType)
{
//Create video element
var vidTest=document.createElement("video");
//Detect whether the video in ogg format can be played
oggTest= vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
//Detect whether videos in MP4 format can be played
h264Test=vidTest .canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry . No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes ! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}


Copy code
The code is as follows:

canPlayType method description:
1. Definition: Check whether the browser can play the specified audio/ Video type.
2. Return value:
"probably", indicating that the browser is most likely to support the video or audio.
"maybe" means that the browser may support the video or audio.
"" (empty string), indicating that the browser does not support the video or audio.
Note: Internet Explorer 8 and earlier versions do not support this method.
Syntax: audio|video.canPlayType(type))
Parameter description:
type: the audio or video type to be detected,
Common values: video/ogg; video/mp4; video/webm ; audio/mpeg;audio/ogg;audio/mp4
Common values ​​(including the audio or video codec to detect):
video/ogg; codecs="theora, vorbis"
video/mp4 ; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs=" mp4a.40.5"
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：IE10 Error.stack makes script debugging more convenient and faster_html5 tutorial tipsNext article：IE10 Error.stack makes script debugging more convenient and faster_html5 tutorial tips

Related articles

See more