Question

我有用于网站原始页面构建器（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移动版上正常工作吗？

Answer 1

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

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

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

<video id="BgVideo" muted autoplay>

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

Answer 2

我认为Chrome和Safari浏览器不允许自动播放视频，它只能在静音模式下工作。

<video muted autoplay>
</video>

我相信您也可以使用js开始自动播放

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

Answer 3

尝试删除glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, Tex); glBegin(GL_POLYGON); glTexCoord2f( 1.0, 1.0); glVertex3f( 1.0, 1.0, 1); glTexCoord2f( 1.0, -1.0); glVertex3f( 1.0, -1.0, 1); glTexCoord2f( 1.0, -1.0); glVertex3f( 1.0, -1.0, -1); glTexCoord2f( 1.0, 1.0); glVertex3f( 1.0, 1.0, -1); glEnd(); glDisable(GL_TEXTURE_2D);吗？不确定是否会这样做。

=""

也许添加此脚本？这项工作适合我在野生动物园中进行。

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

Answer 4

只需添加“ playsinline”以及静音和自动播放功能即可。

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

Answer 5

更新

如第一篇文章所述，我在video background for site origins plugin中使用Wordpress。

尽管该插件最近没有更新，但GitHub上有可用更新：https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

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

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

Answer 7

我能得到的最佳解决方案是在

之后添加此代码

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

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

7 个答案: