javascript - Safari 阻止 video.js 播放器自动播放

Question

在我的网站上，我有使用 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

Answer 1

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

希望它能有所帮助。