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

发布于 2024-12-05 04:53:40 字数 264 浏览 0 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

糖粟与秋泊 2024-12-12 04:53:40

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

You can check codecs for different video types with HTMLVideoElement.prototype.canPlayType. There is also a great HTML5 feature detection library, 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"' );
}

回复收藏 0 原文

老旧海报 2024-12-12 04:53:40

我建议您使用类似 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 中的字体系列声明。

I'd recommend you use something like http://videojs.com/, they use a Flash fallback and their syntax will give you the correct order of the formats that you should use for all browsers.

It goes like this:

<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>

If the browser doesn't understand MP4, it goes to WebM, if it doesn't it goes to OGG, if it doesn't understand it, it goes to the Flash fallback.

Think of it like font-family declarations in CSS.

回复收藏 0 原文

~没有更多了~