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

无延迟直播

视频加密与安全

在线导播台

相关推荐
YWamy8 小时前
RTC 实时音视频底层架构解析:多场景下 SDK 技术范式与国产化落地逻辑探究
实时音视频
东方护航数据恢复(深圳)12 小时前
服务器硬盘黄灯/红灯故障排查与处理命令全指南_东方护航数据恢复深圳店
运维·服务器·chrome
赵广陆13 小时前
FastAPI零基础完整实战
前端·chrome·fastapi
Nuanyt2 天前
Linux系统的 Shell 常见指令和常见知识点(以bash为主)
linux·运维·chrome·bash
RTC实战笔记2 天前
居家养老应急系统怎么做?告警、视频通话与 RTC 能力设计指南
音视频·实时音视频·rtc
RTC实战笔记2 天前
IM 产品怎么加语音房?从消息系统到麦位、房间和实时互动
实时互动·语音识别·实时音视频
lpfasd1233 天前
MediaCrawler 项目深度分析
chrome·python·chrome devtools
水瓶夜之3 天前
.NET 中的新增功能系列文章——.NET SDK中的新增功能
前端·chrome·.net
代码对我眨眼睛4 天前
macOS Google Chrome 常用快捷键
前端·chrome·macos
小猪咪piggy4 天前
【AI 赋能测试】Langchain 框架的使用
人工智能·chrome·langchain