如何检测HTML5视频标记支持的视频格式？ [英] How to detect supported video formats for the HTML5 video tag?

问题描述

我使用视频标签在HTML5中制作应用程序，在用户选择视频文件的应用程序中，我播放该文件。这一切都发生在本地，因为我只链接到该文件在用户的机器。

I am making an application in HTML5 using the video tag, in the application the user chooses a video file and I play that file. This all happens locally because I only link to that file in the user's machine.

我想只允许浏览器可以播放的格式在我的应用程序中播放，并显示不支持的格式的错误。问题是不同的浏览器可以播放不同的格式。

I want to allow only formats the browser can play to be played in my application, and to show an error for unsupported formats. The problem is that different browsers can play different formats.

我知道我可以检查浏览器，并与我知道它可以播放的格式匹配，但如果浏览器更新支持另一种格式怎么办？我将必须更新我的应用程序与新的信息，同时用户将无法播放支持的格式。

I know I can check for the browser and match it with the formats I know it can play, but what if the browser updates to support another format? I'll have to update my application with the new information and meanwhile users won't be able to play supported formats. Is there a way to check just for the supported video formats?

推荐答案

您可以使用 HTMLVideoElement.prototype.canPlayType 。还有一个伟大的HTML5功能检测库， Modernizr 。

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}

这篇关于如何检测HTML5视频标记支持的视频格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！