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

Source: Internet
Author: User

Comments: HTML5 provides the standard for displaying videos. So how can we check whether your browser supports video playback? I will share with you a small example. If you are interested, you can understand it.
The Code is as follows:
<STRONG> more and more websites now provide video playback (non-plug-ins ). HTML5 provides the standard for displaying videos. So how can we check whether your browser supports video playback? Let's write a column. </STRONG>


The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Body>
<H1> HTML 5 video <P> check whether your browser supports HTML5 videos: </p>
<Div id = "checkVideoResult" style = "margin: 10px 0 0 0; border: 0; padding: 0;">
<Button style = "font-family: Arial, Helvetica, sans-serif;" onclick = "checkVideo ()"> Check </button>
</Div>
</Div>
</Body>
</Html>

Below is the js Code:

The Code is as follows:
Function checkVideo ()
{
If (!! Document. createElement ('video'). canPlayType)
{
// Create a video Element
Var vidTest = document. createElement ("video ");
// Checks whether videos in ogg format can be played.
OggTest = vidTest. canPlayType ('video/ogg; codecs = "theora, vorbis "');
If (! OggTest)
{
// Checks whether MP4 videos can be played.
Hsf-test = vidTest. canPlayType ('video/mp4; codecs = "avc1.42E01E, mp4a. 40.2 "');
If (! Hsf-test)
{
Document. getElementById ("checkVideoResult"). innerHTML = "Sorry. No video support ."
}
Else
{
If (hsf-test = "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 ."
}
}


The Code is as follows:
CanPlayType method description:
1. Definition: checks whether the browser can play the specified audio/video type.
2. Return Value:
"Probably" indicates that the browser is most likely to support this video or audio.
"Maybe" indicates that the browser may support this video or audio.
"" (Empty string), indicating that the browser does not support this 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 audio or video codecs to be detected ):
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"

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.