logo标签列表

HTML5视频背景在iPhone的Safari浏览器上无法播放

htmlhtml5-videomobile-safari
9

我有一个适用于SiteOrigin页面生成器（WordPress）的视频背景插件，并已上传了背景视频（MP4和WEBM格式）。文件大小分别约为35mb和17mb。

我在几台运行最新iOS的iPhone上测试了一下，使用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上正常播放吗？
我认为Chrome和Safari不允许自动播放视频，只能在静音模式下工作。 - Nijeesh Joshy
可能是 https://dev59.com/Bqrka4cB1Zd3GeqPXQdz#51432617 的重复问题。 - stijnb1234
1
这是官方博客文章，关于限制的情况，如果有帮助的话：https://webkit.org/blog/6784/new-video-policies-for-ios/ - Pikamander2
7个回答
20

Safari在以下2种情况下不允许视频自动播放

  1. 未设置“静音”配置
  2. 当iPhone处于省电模式或低电量状态时

要实现自动播放，请在属性和JavaScript中启用mute和autoplay

<video id="BgVideo" muted autoplay>

<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>
1
嗨@Ganeshkumar K，这在我的设置中缺失了（在脚本部分），但在Safari iOS上仍然无法工作？？？ - YorkieMagento
如果你能在CodePen/JSFiddle上设置好你的代码并分享链接，那么我可以更好地查看它。 - Ganeshkumar K
感谢@Ganeshkumar K. 在GitHub上找到了解决问题的方法，并在答案中进行了更新。 - YorkieMagento
13

只需在静音和自动播放参数之后添加“playsinline”即可。

<video autoplay loop muted playsinline src="..."></video>
1
这应该是正确的答案。 - Bob Arezina
3

我认为Chrome和Safari不允许视频自动播放，只有在静音模式下才能正常工作。

<video muted autoplay>
</video>

我相信你也可以使用JS开始自动播放

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>
嗨，Nijeesh，根据属性，视频处于静音模式。 - YorkieMagento
抱歉，那是一个问题还是你在建议我做什么？ - Nijeesh Joshy
嗨，我已经在视频元素和脚本中添加了所有建议的属性...但对我来说仍然无法工作。还有其他想法吗？ - YorkieMagento
你试过使用JavaScript触发播放吗？另外，你遇到问题的浏览器是哪个？或许可以看一下这个：https://dev59.com/jFsW5IYBdhLWcg3woYYj - Nijeesh Joshy
2

尝试去掉 = "" 吗？不确定这是否有效...

<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>
1
嗨Niroh，代码设置中没有“=“”，它们是由Chrome添加的，并在我进行检查时出现。 - YorkieMagento
1
我在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>
1
-1

我这里有完整的代码，只需要复制和编辑即可 :)))

<!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>
1
请在您的回答中提供更多细节。目前的写法让人难以理解您的解决方案。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接