如果设备无法播放视频，如何为页眉添加 "backup" 图片背景

Question

因此，对于 HTML5 视频，可以添加多个视频文件，据我所知，browser/device 从这些文件中挑选出最合适的视频。我想知道如果视频无法播放，如何添加图像作为背景。我目前尝试过此解决方案，但据我所知，我可能无法在视频标签内加载图像。

<div class="custom-header-background" >

<video autoplay loop muted>
 <source src="<?php bloginfo('template_url'); ?>/img/vid2.mp4" type="video/mp4">
<source src="<?php bloginfo('template_url'); ?>/img/vid2.m4v" type="video/m4v">
<source src="<?php bloginfo('template_url'); ?>/img/img2.jpg" type="image/jpg">


Your browser does not support the video tag.
</video>

</div>

Answer 1

用 "backup" 图片将 div 绝对定位在视频播放器的顶部有意义吗？

设置为 display: none;

如果您的视频无法播放，您可以将其设置为 display: block; 我的理解是，您还可以像这样连接到视频播放器的 onError 事件中：

// Code to find your player

yourplayer.onerror = () => {

document.getElementById("yourimage").style.display = "block";

}

看看我做的笔：

https://codepen.io/foreza/pen/XWmoaNB

如果设备无法播放视频，如何为页眉添加 "backup" 图片背景

How to I add a "backup" image background for header if device can't play the video

html

video

background

image

header