代码之家 › 专栏 › 技术社区 › akash

我的html背景视频未在safari中播放

webpage safari html jquery javascript

akash · 技术社区 · 7 年前

我用html和bootstrap创建了一个即将推出的网页。我使用jquery根据屏幕大小显示背景视频和图像。当屏幕检测到小于729px时,它会将我的背景图像附加到特定的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加载的背景图像

1 回复 | 直到 7 年前

Daniel Thompson 7 年前

Safari不支持 video/webm 媒体(看起来IE 11没有: Can I Use - WebM Video Format ).

如果你想在Safari中玩这个游戏,你需要包括 <source> 使用不同的视频文件/类型( 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>
`);

推荐文章

Aaron · IdentityServer4和运行在iOS 9.3.5上的客户端(禁用JavaScript)

7 年前

thank_K · 检测safari并停止脚本

7 年前

mattaningram · 在Safari中,框阴影颜色函数中的CSS自定义属性渲染不正确

7 年前

Dockson · iOS Safari 11.3上navigator中没有服务人员

7 年前

Emrah Åentürk · pc和移动设备之间的角度5日期时区差异

7 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

7 年前

Archna Rangrej · 如何在Safari中录制HTML5视频?

7 年前

akash · 我的html背景视频未在safari中播放

7 年前

DsXack · 如何在iOS和macOS上使用Safari中的网络摄像头录制视频?

7 年前

Charlie McShane · Flex Wrap+TransformY在Safari中不起作用

7 年前