Chrome自动播放限制策略

最新推荐文章于 2024-06-11 08:53:00 发布

阿酷tony

最新推荐文章于 2024-06-11 08:53:00 发布

阅读量585

点赞数

分类专栏：文章存档文章标签： chrome 视频自动播放视频播放实时音视频

本文链接：https://blog.csdn.net/ffffffff8/article/details/133737224

版权

文章存档专栏收录该内容

222 篇文章 2 订阅

订阅专栏

原文链接：Chrome 自动播放限制策略

Web浏览器正在朝着更严格的自动播放策略发展，以便改善用户体验，最大限度地降低安装广告拦截器的积极性并减少昂贵和/或受限网络上的数据消耗。这些更改旨在为用户提供更大的播放控制权，并使开发商获得合法用例。

开发人员最佳实践 / 视频元素

永远不要假设视频会播放，并且在视频不是真正播放时不要显示暂停按钮。
关注播放函数返回的Promise

var promise = document.querySelector('video').play();
if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

使用静音自动播放

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>