Question

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

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

我知道我可以检查浏览器并将其与我知道它可以播放的格式相匹配，但是如果浏览器更新以支持其他格式怎么办？我将不得不使用新信息更新我的应用程序，同时用户将无法播放支持的格式。有没有办法只检查支持的视频格式？

Answer 1

您可以使用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"' );
}

Answer 2

我建议您使用类似http://videojs.com/的内容，他们使用Flash后备版，他们的语法将为您提供所有浏览器应使用的格式的正确顺序。

它是这样的：

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a>

如果浏览器不理解MP4，那么它会进入WebM，如果它没有进入OGG，如果它不理解，则进入Flash后备。

把它想象成CSS中的font-family声明。

如何检测HTML5视频标签支持的视频格式？

2 个答案: