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虚拟直播

无延迟直播

视频加密与安全

在线导播台

相关推荐
X1A0RAN9 分钟前
密匣 PsdKeep:一个属于你自己的 Chrome 账号记事本
前端·chrome
小狼1545419 小时前
浏览器插件怎样实现可靠的批量网页操作?以发票申请任务为例
chrome·ai编程
小狼1545420 小时前
拼多多订单多时如何批量申请发票:筛选、提交和补漏方法
chrome·ai编程
YWamy1 天前
政企项目 RTC SDK 评估思路:从技术指标到落地选型
音视频·实时音视频
摸鱼仙人~1 天前
前端知识体系
chrome
hz567891 天前
音视频 SDK在行政执法的应用方案:实现执法全过程音视频留痕
安全·实时音视频·信息与通信
YJlio2 天前
锤子助手第012个开关:启用朋友圈视频进度条的位置、验证方法与播放交互边界
objective-c·视频播放·功能验证·锤子助手·朋友圈视频进度条·ios微信插件·交互测试
minhuan2 天前
大模型前端感知层工程实践:基于Headless Chrome验证AI静默监听人脸动静检测逻辑27.2
chrome·大模型应用·大模型前端感知层工程·headless chrome·ai静默监听人脸动静检测
晴天163 天前
Chrome DevTools 深度调试指南
前端·chrome·chrome devtools
hanchenxing3 天前
自动化脚本“卡住无输出“怎么办: 一次 WebSocket 挂死的排查与自愈模板
运维·javascript·chrome·websocket·自动化·自动化爬虫