Safari 阻止 video.js 播放器的自动播放答案

【问题标题】：Safari prevent auto play of video.js playerSafari 阻止 video.js 播放器的自动播放
【发布时间】：2019-06-04 23:44:06
【问题描述】：

在我的网站上，我有使用 video.js 库的 vue-video-player。在三星 Galaxy s9 的移动 chrome 上，它可以正确自动播放，但在 iphone 7 的移动 safari 上不能自动播放。

HTML 是：

<video-player  class="video-player-box"
               id="player"
               ref="videoPlayer"
               :options="playerOptions"
               @ended="onPlayerEnded($event)">
</video-player>

在我的脚本标签中：

data() {
    return {
        playerOptions: {
            muted: true,
            autoplay: true,
            controls: false,
            sources: [{
                type: "video/mp4",
                src: "https://res.cloudinary.com/dlqvkenro/video/upload/v1544320787/gvnn.mp4"
            }],
            poster: "/static/images/author.jpg",
        }
    }
},

实际上是在我单击声音图标视频开始播放时在 safari 上，但我希望它在用户进入页面时自动启动。

我添加了代码以编程方式启动播放器：

mounted() {
    this.player.play()
        .then(() => {
            console.log('play succseed');
        })
        .catch(() => {
            alert('safari prevent player');
        });
},

实际上在 safari 中出现警报。有什么办法可以战胜苹果吗？

Demo

【问题讨论】：

标签： javascript vue.js safari vuejs2 video.js

【解决方案1】：

看看这里https://blog.videojs.com/autoplay-best-practices-with-video-js/

我希望它有所帮助。

【讨论】：

【解决方案2】：

我在我的 vue 组件中使用 <video> 标记时遇到了类似的问题。我能够让它自动播放，但必须重新加载 html 才能工作。也许你可以在下面使用一些东西......

<template>
<div class="video-wrapper">
    <video class="video" playsinline muted autoplay loop>
        <source src="loopedVideo.mp4" type='video/mp4'>
    </video>
</div>
</template>
<script>
export default {
name: 'Video',
mounted() {
    // Start looped video.
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let video = document.querySelector('.video');
    if (isSafari && video) {
        setTimeout(function() {
            // werid fix for safari
            document.querySelector('.video-wrapper').innerHTML = video.outerHTML;
        }, 100);
    }
}
}
</script>

【讨论】：