


HTML5 video support detection (check whether the browser supports video playback)_html5 tutorial skills
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.
HTML 5 Video h1>
Check whether your browser supports HTML5 videos:
The following is the js code:
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."
}
}
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"

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

Discussion on using custom stylesheets in Safari Today we will discuss a custom stylesheet application problem for Safari browser. Front-end novice...

Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...

How to use locally installed font files on web pages Have you encountered this situation in web page development: you have installed a font on your computer...

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...

Implementing responsive layouts using CSS When we want to implement layout changes under different screen sizes in web design, CSS...
