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，因此浏览器或设备可以适当地选择它可以实际显示的格式。

2

0

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 中显示的 Type 和 Codec 放在 source 属性中-只保留 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>

Answer 4

我试着遵循非理性的反应，但得到了错误，直到我切换's 和"s 周围的type标志。

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

似乎这不重要，但这是它为我工作的唯一方式。