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

无延迟直播

视频加密与安全

在线导播台

相关推荐
Jonathan Star6 小时前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
是Yu欸7 小时前
【AI视频】从单模型,到AI Agent工作流
人工智能·ai·ai作画·aigc·音视频·实时音视频
科技百宝箱10 小时前
02-如何使用Chrome工具排查内存泄露问题
前端·chrome
西瓜树枝1 天前
Chrome 扩展开发从入门到实践:以 Cookie 跨页提取工具为例,拆解核心模块与交互逻辑
前端·javascript·chrome
Harriet嘉1 天前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
米花丶1 天前
[实践] 如何使用Chrome工具排查内存泄露问题?
前端·chrome
Tajang1 天前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
九皇叔叔2 天前
Linux Shell 函数:从定义到实战,让脚本更高效
linux·运维·chrome·shell
极智-9962 天前
【Chrome谷歌浏览器】官方下载方式?【图文详解】电脑版下载?正版安全下载?最新版下载?
chrome·chrome谷歌浏览器·chrome下载安装·官方下载方式·chrome谷歌浏览器下载安装·chrome浏览器官网·chrome官网下载安装
AI浩3 天前
Redis中的RPOP、BRPOP、LPOP 和 BLPOP
数据库·chrome·redis