iOS 上的 HTML5 视频自动播放答案

【问题标题】：HTML5 Video Autoplay on iOSiOS 上的 HTML5 视频自动播放
【发布时间】：2018-05-28 22:59:52
【问题描述】：

所以我有一个需要自动播放的视频。它在 Android（Chrome 和 FF）上运行良好，但 iOS Safari 似乎不想自动播放视频。这是我正在使用的代码（它是一个树枝模板） -

<video class="home-video"  poster="{{paths.files}}{{record.templatefields.video_poster}}" 
autoplay loop muted controls >
  <source src="{{paths.files}}{{record.templatefields.video}}" type="video/mp4" />
  <source src="{{paths.files}}{{record.templatefields.video_ogg}}" type="video/ogg" />
</video>

我已经看过https://webkit.org/blog/6784/new-video-policies-for-ios 我已经确保视频没有任何音轨，所以这应该不是问题。设备正在使用 iOS 10+

任何线索将不胜感激..

【问题讨论】：

标签： ios html html5-video

【解决方案1】：

添加“playsinline”属性。还要确保上面没有其他元素。

【讨论】：

【解决方案2】：

添加playsinline 属性。

如果您的视频超出视口或位于其他元素之后，请在页面加载后立即使用 javascript play()，这可能会有所帮助（只要设置了其他需要的属性）。

使用 jQuery（从我更大的 jQuery 插件中提取）：

var start_video = function($target){

    var video_width = $target.width();
    var video_height = $target.height();

    // if not loaded yet, wait another 500ms
    if ($target.get(0).readyState < 2 || video_width == 0 || video_height == 0){
        setTimeout(function(){
            start_video($target);
        }, 500);
        return;
    }

    $target.get(0).play();

}

$(document).ready(function() {
    start_video($('.home-video'));
}

【讨论】：