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

【问题标题】：HTML5 Video Background not playing Safari on iPhoneHTML5 视频背景无法在 iPhone 上播放 Safari
【发布时间】：2020-04-07 01:33:39
【问题描述】：

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

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

视频代码：

<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 移动设备上运行吗？

【问题讨论】：

我认为 chrome 和 safari 不允许自动播放视频，它只能在静音模式下工作。
stackoverflow.com/a/51432617/9781954的可能重复
这里是关于限制的官方博客文章，以防它有帮助：webkit.org/blog/6784/new-video-policies-for-ios

标签： html html5-video mobile-safari

【解决方案1】：

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

未设置“静音”配置时
当 iphone 处于省电模式或电量不足时

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

<video id="BgVideo" muted autoplay>

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

【讨论】：

嗨@Ganeshkumar K，这是我的设置（在脚本部分）中缺少的，但在Safari iOS上仍然无法使用？？？
如果您可以在 codepen/jsfiddle 中设置您的代码并分享链接，那么我可以更好地查看它。
感谢@Ganeshkumar K。在 GitHub 上找到了该问题的解决方案，并在答案中进行了更新。

【解决方案2】：

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

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

【讨论】：

这应该是正确的答案。

【解决方案3】：

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

<video muted autoplay>
</video>

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

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

【讨论】：

嗨 Nijeesh，根据属性，视频处于静音模式。
抱歉，这是个问题还是你在暗示我什么？
嗨，我已经拥有视频元素和脚本中建议的所有属性......但仍然不适合我。请问还有什么想法吗？
你试过用 JavaScript 触发游戏吗？还有哪个浏览器有问题？可以看看这个：-stackoverflow.com/questions/34764876/…

【解决方案4】：

尝试删除 ="" 吗？不知道这样行不行。。

<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>

【讨论】：

嗨 Niroh，="" 不在设置的代码中。它们是由 Chrome 添加的，并且在我检查时添加到那里。

【解决方案5】：

更新

如最初的帖子中所述，我使用video background for site origins plugin 代替Wordpress。

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

添加这个新文件/覆盖旧文件解决了 iOS 上的问题。希望这可以帮助其他使用此特定插件的人。

【讨论】：

【解决方案6】：

我只在 Safari 中遇到了同样的问题，并且已经尝试了各种方法，例如在视频标签中添加 playsinline 不起作用。在 javascript 中将 .mp4 视频链接转换为 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，在这里我们将视频链接转换为 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>

【讨论】：

【解决方案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>

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。