HTML5 视频背景无法在 iPhone 上播放 Safari

Question

我有网站原始页面生成器 (Wordpress) 的视频背景插件，并且我已经上传了背景视频（MP4 和 WEBM 格式）。文件大小分别约为 35mb 和 17mb。

我已经在几部 iPhone 运行上测试了最新的 iOS 和 safari，视频没有自动播放（只显示后备图像）。

视频代码：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

据我所知，该视频包含通过 Safari 所需的属性（并且在 Safari 桌面上播放良好）。

任何人都可以建议修复以使其在 Safari 移动版上运行吗？

Answer 1

我认为 chrome 并且 safari 不允许自动播放视频，它只能在静音模式下工作。

<video muted autoplay>
</video>

相信你也可以用js启动自动播放

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

Answer 2

Safari 不允许在这两种情况下自动播放视频

当 "muted" 配置未设置时
当 iphone 处于省电模式或电量不足时

要实现自动播放，请在属性中启用 mute 和 autoplay，并通过 js

<video id="BgVideo" muted autoplay>

<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>

Answer 3

尝试删除 =""？不确定是否会这样做..

<video id="so_bgvideo_5df3a8b601042" class="so_video_bg jquery-background-video is-playing is-visible" loop autoplay playsinline muted data-bgvideo="" poster="https://4f15fi427agh15x4ol42ijp7-wpengine.netdna-ssl.com/wp- content/uploads/video-marketing-1920x1080.jpg" data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" data-bgvideo-show-pause-play="true" data-bgvideo-pause-play-x-pos="right" data-bgvideo-pause-play-y-pos="top" style="min-width: auto; min-height:auto; width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-duration: 500ms; z-index: 999;">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

也许添加这个脚本？这在 safari 中对我有用。

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

Answer 4

更新

如开头所述 post 我使用 video background for site origins plugin 作为 Wordpress。

尽管该插件最近没有更新，但在 GitHub 此处提供了更新：https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

添加这个新的 file/overwriting 旧的解决了 iOS 上的问题。希望这对使用此特定插件的其他人有所帮助。

Answer 5

只需添加 "playsinline" 以及静音和自动播放..就是这样..

<video autoplay loop muted playsinline src="..."></video>

Answer 6

我只在 Safari 中遇到过同样的问题，并且已经尝试了各种方法，例如在视频标签中添加 playsinline，但都不起作用。在 javascript 中将 .mp4 视频 link 转换为 BLOB 对我来说很神奇。

最初，在视频源标签中定义 id（例如 id="ForcePlay"）：

 <video id="ForcePlay" width="500px" height="500px" muted playsinline controls> 
    <source src="url path to your video file" type="video/mp4">
 </video>

在 html 文件中创建 javascript，在这里我们将视频 link 转换为 blob：

<script type="text/javascript">
  function makeURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) :    
    window.webkitURL.createObjectURL(object);
  }

  async function display(videoStream){
    var myvideo = document.getElementById('ForcePlay');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl= makeURL(blob);
    myvideo.src = videoUrl;
  }

  display('url path to your video file');
</script>

Answer 7

我这里有完整的代码，只需复制并编辑 :)))

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>page_trouble</title>
    <meta charset="utf-8" />
    <style type="text/css">
    
  * {
 margin:0;
 padding:0;
 }
 
  
 video#bgvid {

  min-width: auto; min-height: 150vh;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}
  
  
</style>
    
    
</head>
<body style="background-color:black;">


    <video autoplay loop muted playsinline id="bgvid" >
<source src="fleur_trouble.mp4" type="video/mp4""
<source src="fleur_trouble.webpm" type="video/webpm""


</body>

</html>

HTML5 视频背景无法在 iPhone 上播放 Safari

HTML5 Video Background not playing Safari on iPhone

html

mobile-safari

html5-video