我正在使用视频标签制作HTML5应用程序,在该应用程序中,用户选择一个视频文件,然后我播放该文件。这一切都是在本地进行的,因为我只链接到用户机器上的那个文件。
我希望在我的应用程序中仅允许播放浏览器可以播放的格式,并对不支持的格式显示错误。问题是不同的浏览器可以播放不同的格式。
我知道我可以检查浏览器并将其与我所知道的它可以播放的格式匹配,但如果浏览器更新以支持另一种格式怎么办?我将不得不使用新信息更新我的应用程序,同时用户将无法播放支持的格式。是否有一种方法只检查支持的视频格式?
我正在使用视频标签制作HTML5应用程序,在该应用程序中,用户选择一个视频文件,然后我播放该文件。这一切都是在本地进行的,因为我只链接到用户机器上的那个文件。
我希望在我的应用程序中仅允许播放浏览器可以播放的格式,并对不支持的格式显示错误。问题是不同的浏览器可以播放不同的格式。
我知道我可以检查浏览器并将其与我所知道的它可以播放的格式匹配,但如果浏览器更新以支持另一种格式怎么办?我将不得不使用新信息更新我的应用程序,同时用户将无法播放支持的格式。是否有一种方法只检查支持的视频格式?
你可以使用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"' );
}
<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>
<video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> 不支持视频标签。在<a href="movie.webm">这里</a>下载视频。 <video>
- Peter Pajchl