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

无延迟直播

视频加密与安全

在线导播台

相关推荐
Dxy123931021611 小时前
Linux 如何关闭关不掉的进程
linux·运维·chrome
HackTwoHub19 小时前
WEB扫描器Invicti-Professional-V26.50.0(自动化爬虫扫描)更新
前端·人工智能·chrome·爬虫·web安全·网络安全·自动化
独隅20 小时前
Chrome插件开发实战详细指南
前端·chrome
嵌入式小站1 天前
STM32 零基础可移植教程 18:I2C 入门,先用扫描器找一找总线上有没有设备
chrome·stm32·嵌入式硬件
John_ToDebug1 天前
WeakPtr 与 Raw 指针:UAF 如何识别、如何处理、以及 Chromium 的设计哲学
c++·chrome·ai
做萤石二次开发的哈哈2 天前
具备 ERTC 能力的萤石设备如何对接客户端通话?
音视频·实时音视频·萤石开放平台
剑锋所指,所向披靡!3 天前
C++多线程实现
开发语言·c++·chrome
喜欢踢足球的老罗3 天前
逆向 WhatsApp Web:前端 SDK 深度剖析与 Chrome 插件实战指南
前端·chrome
剑神一笑3 天前
Linux chmod 命令深度解析:从权限位到符号模式的完整指南
linux·运维·chrome
喜欢踢足球的老罗3 天前
产品方案:从已有 CRM AI 系统切入 WhatsApp Chrome 插件赛道
前端·人工智能·chrome