我的 html 背景视频无法在 Safari 中播放

Question

我使用 html 创建了一个即将推出的网页，bootstrap.I 使用 jquery 显示背景视频和基于屏幕的图像 size.when 检测到的屏幕小于 729 像素，它将我的背景图像附加到特定的 div.if 比附加背景视频的像素多。在 android 和除 iphone safari 之外的其他设备上一切正常。 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

加载的背景图片

Answer 1

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

如果您希望在 Safari 中播放此视频，您需要添加 <source> 和不同的视频 file/type（video/mp4 应该没问题） webm 来源。

例如

$('#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>
`);

我的 html 背景视频无法在 Safari 中播放

My html background video not playing in safari

html

javascript

safari

jquery

webpage