我的 html 背景视频没有在 Safari 中播放答案

【问题标题】：My html background video not playing in safari我的 html 背景视频没有在 Safari 中播放
【发布时间】：2018-03-07 22:38:57
【问题描述】：

我使用 html 和 bootstrap 创建了一个即将推出的网页。我使用 jquery 根据屏幕尺寸显示背景视频和图像。当屏幕检测到小于 729 像素时，它会将我的背景图像附加到特定的 div。如果超过该像素它附加了一个背景视频。除 iphone safari 外，在 android 和其他设备上一切正常。 safari 浏览器不加载我的背景图片和背景视频。

if(screen.width >= 769){

$('#back').append('<div class="video-bg" style="position:fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;"> <video autoplay muted loop><source src="video/Final_video.webm" type="video/webm"></video></div>');
        }

if(screen.width <= 768){

$('#back').append('<div class="bg1" id="backchange" style="position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;">');

}

这里的bg1是从css加载的背景图片

【问题讨论】：

控制台有错误吗？
我的控制台很好，没有错误

标签： javascript jquery html safari webpage

【解决方案1】：

Safari 不支持 video/webm 媒体（看起来 IE 11 也不支持：Can I Use - WebM Video Format）。

如果您希望它在 Safari 中播放，除了 webm 源之外，您还需要包含具有不同视频文件/类型的 <source>（video/mp4 应该没问题）。

例如

$('#back').append(`
  <div class="video-bg" style="position:fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;">
    <video autoplay muted loop>
      <source src="video/Final_video.webm" type="video/webm">
      <source src="video/Final_video.mp4" type="video/mp4">
    </video>
  </div>
`);

【讨论】：