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

无延迟直播

视频加密与安全

在线导播台

相关推荐
简离5 小时前
前端调试实战:基于 chrome://webrtc-internals/ 高效排查WebRTC问题
前端·chrome·webrtc
REDcker21 小时前
WebCodecs VideoDecoder 的 hardwareAcceleration 使用
前端·音视频·实时音视频·直播·webcodecs·videodecoder
YYDataV数据可视化1 天前
【P2P音视频通信系统】之 WebRTC Android平台 aar 下载
webrtc·实时音视频
Ai老司机1 天前
Chrome浏览器驱动(ChromeDriver)官方下载 - 全平台高速镜像站 | chromedrive.cn
前端·chrome
电商API_180079052471 天前
如何将小红书评论数据封装到API实现自动化分析?测试API实战指南
运维·chrome·自动化
~远在太平洋~1 天前
debian系统已安装python3.12却无法执行python命令
chrome·python·debian
阿珊和她的猫1 天前
浏览器跨页签数据共享方案
前端·javascript·vue.js·chrome
阿珊和她的猫1 天前
Chrome性能测试关键参数解析
前端·vue.js·chrome
zhangfeng11331 天前
快速验证哪个文件坏了 模型文件损坏或不完整大语言模型开发 .llm
人工智能·chrome·语言模型
不光头强2 天前
Linux 系统中最常用的命令及具体使用方法
linux·运维·chrome