如何将 VP9 webm、h264 MP4 和 h265 MP4 嵌入到单个视频标签中？

Question

我想将视频标签放入 html 页面。如果他们的设备支持 webm，我希望它加载一个 webm 视频文件，否则它会加载 h265 MP4，如果他们的设备支持 h265，否则它将退回到 h264 MP4。

<video controls preload="metadata" width="720" >
   <source src="v9.webm" type="video/webm">
   <source src="h265.mp4" type="video/mp4">
   <source src="h264.mp4" type="video/mp4">
</video>

正确的做法是什么？它似乎没有办法表明第一个 mp4 文件是 h265 文件，第二个是 h264，因此浏览器或设备可以适当地选择它实际可以显示的格式。

Answer 1

我会尝试以下方法：

<video id="video" controls>
</video>

<script>
var video = document.getElementById("video");

if(video.canPlayType('video/mp4; codecs="avc1.42E01E"'))
{
    video.src = "h264.mp4";
}

if(video.canPlayType('video/mp4; codecs="hev1"'))
{
    video.src = "h265.mp4";
}

if(video.canPlayType('video/webm; codecs="vp9"')
{
    video.src = "vp9.webm";
}

</script>

Answer 2

您可以将第一个答案 JavaSCript 中显示的类型和编解码器放在源属性中 - 仅保留 HTM5。 MDN reference

Answer 3

因此，结合这两个响应，我得到：

<video controls preload="metadata" width="720" >
   <source src="v9.webm" type="video/webm; codecs='vp9'">
   <source src="h265.mp4" type="video/mp4; codecs='hev1'">
   <source src="h264.mp4" type="video/mp4; codecs='avc1.42E01E'">
</video>

如何将 VP9 webm、h264 MP4 和 h265 MP4 嵌入到单个视频标签中？

How can I embed a VP9 webm, h264 MP4, and h265 MP4 into a single video tag?

video-streaming

html5-video

mp4

h.264

h.265