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

May 16, 2016 pm 03:49 PM
html5 Browser video


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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

How to optimize website performance: Experiences and lessons learned from using the Minify library How to optimize website performance: Experiences and lessons learned from using the Minify library Apr 17, 2025 pm 11:18 PM

In the process of developing a website, improving page loading has always been one of my top priorities. Once, I tried using the Miniify library to compress and merge CSS and JavaScript files in order to improve the performance of the website. However, I encountered many problems and challenges during use, which eventually made me realize that Miniify may no longer be the best choice. Below I will share my experience and how to install and use Minify through Composer.

Use Composer to solve browser sniffing: The practical application of WhichBrowser/Parser library Use Composer to solve browser sniffing: The practical application of WhichBrowser/Parser library Apr 17, 2025 pm 11:21 PM

I encountered a tricky problem when developing a multi-device-compatible website: how to accurately identify the user's browser and device information. After trying multiple methods, I found that directly parsing user-agent strings (User-Agent) are both complex and unreliable, and often misjudgments occur. Fortunately, I successfully solved this problem by installing the WhichBrowser/Parser library using Composer.

HTML5 and H5: Understanding the Common Usage HTML5 and H5: Understanding the Common Usage Apr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? Apr 19, 2025 pm 02:21 PM

The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �...

Why can't JavaScript directly obtain hardware information on the user's computer? Why can't JavaScript directly obtain hardware information on the user's computer? Apr 19, 2025 pm 08:15 PM

Discussion on the reasons why JavaScript cannot obtain user computer hardware information In daily programming, many developers will be curious about why JavaScript cannot be directly obtained...

Can JWT implement dynamic permission changes? What is the difference from the Session mechanism? Can JWT implement dynamic permission changes? What is the difference from the Session mechanism? Apr 19, 2025 pm 06:12 PM

Confusion and answers about JWT and Session Many beginners are often confused about their nature and applicable scenarios when learning JWT and Session. This article will revolve around J...

How to correctly generate and display the WeChat applet with parameters QR codes in Java? How to correctly generate and display the WeChat applet with parameters QR codes in Java? Apr 19, 2025 pm 04:48 PM

Generating a WeChat applet QR code with parameters in Java and displaying it on an HTML page is a common requirement. This article will discuss in detail how to use J...

See all articles