Chrome自动播放限制策略

原文链接: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>

图 / html5视频播放器调用效果(倍速切换)

图 / html5视频播放器调用效果(超清/高清/流畅画质切换)

MR虚拟直播

无延迟直播

视频加密与安全

在线导播台

相关推荐
木古古189 小时前
使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题
前端·chrome·apache
徐浪老师15 小时前
深入实践 Shell 脚本编程:高效自动化操作指南
运维·chrome·自动化
韦德斯16 小时前
嵌入式Linux的RTC读写操作应用
linux·运维·c语言·arm开发·实时音视频
CrystalShaw16 小时前
RTC QoS方法十三.(ReedSolomonFEC简介)
实时音视频
Vodka~16 小时前
物联网——UNIX时间戳、BKP备份寄存器、RTC时钟
物联网·实时音视频
Dklau-c21 小时前
Linux下,修改环境变量的几种方法
linux·前端·chrome
Black蜡笔小新3 天前
无插件H5播放器EasyPlayer.js RTSP播放器chrome/edge等浏览器如何使用独立显卡
javascript·chrome·edge
gqkmiss3 天前
Chrome 浏览器 131 版本新特性
前端·chrome·浏览器·chrome 131
a1denzzz3 天前
shell编程规范和脚本变量
前端·chrome
Vzhangs3 天前
解决Windows + Chrome 使用Blob下载大文件时,部分情况下报错net:ERR_FAILED 200 (OK)的问题
前端·chrome·windows