Question

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

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>中添加不同的视频文件/类型（video/mp4应该没问题） webm来源。

e.g。

$('#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中播放

1 个答案: