如何在HTML5视频源类型属性中指定HEVC编解码器？
如何在HTML5视频源类型属性中指定HEVC编解码器？
提问于 2018-02-23 17:23:15
(最初张贴在论堆栈溢出上)
我想加载和播放一个更小的HEVC编码的视频在网页浏览器上，并支持它。
我在Safari 11 (macOS 10.13)上使用了这段代码，它支持HEVC格式。
<video muted playsinline autoplay>
<source src="clip.webm" type="video/webm; codecs=vp9">
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="clip.mp4" type="video/mp4; codecs=avc1">
<p>Video not supported</p>
</video>在网络检查器>网络面板中，我看到Safari同时加载了clip.mp4和clip-hevc.mp4。如果我检查视频元素，我会看到clip.mp4正在播放，而不是clip-hevc.mp4。我在iOS 11上也看到了同样的情况。
当我对我指定的类型调用HTMLMediaElement.canPlayType()时，我得到
maybeonvideo/mp4; codecs=hevcprobablyonvideo/mp4; codecs=avc1- 我所见过的HEVC编解码器的变体(例如，
hvc1、hev1)没有任何变化。
还有一点我注意到了:当我删除clip.mp4选项时，clip-hevc.mp4下载并播放得很好！
如何确保浏览器中只有最受支持的MP4变体下载和播放？
回答 1
Webmasters Stack Exchange用户
发布于 2018-02-23 20:27:57
我认为你可能在这里遇到的问题是你已经订购了非.hecv视频秒
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="clip.mp4" type="video/mp4; codecs=avc1">这可能是告诉浏览器加载剪辑-hevc.mp4，然后告诉浏览器加载clip.mp4。
如果您以相反的方式对它们进行排序，这可能会告诉浏览器加载clip.mp4，然后加载clip.hevc.mp4：
<source src="clip.mp4" type="video/mp4; codecs=avc1">
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">所以我认为这就是你遇到的问题。如果你重新订购剪辑- hevc在底部，它可能会加载hevc，如果可能的话。
然而，我不能保证这将不会加载hevc，如果它是不兼容浏览器。您可能希望在不支持hecv的设备上测试它，看看它是否加载了clip.mp4。
还有一些方法可以检查哪些编解码器与浏览器兼容。以下是一个例子：
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"' );
}页面原文内容由Webmasters Stack Exchange提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://webmasters.stackexchange.com/questions/113040
复制相关文章
相似问题
腾讯云开发者
