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

无延迟直播

视频加密与安全

在线导播台

相关推荐
OrangeForce1 小时前
Monknow 书签导出工具:从本地存储提取数据并转为标准 HTML 书签
javascript·chrome·python·edge·html·firefox
晚烛2 小时前
CANN 日志系统:调试与性能分析的日志艺术
前端·chrome·数据挖掘
REDcker5 小时前
QUIC协议详解1
音视频·webrtc·实时音视频·webtransport
做萤石二次开发的哈哈5 小时前
实时音视频ERTC方案概述
实时音视频
进击切图仔1 天前
RTC(Real-time chunking)与 Temporal Ensemble
人工智能·实时音视频
rockmelodies1 天前
CentOS Stream 源码编译安装 Nginx 1.31.0(静态依赖版)
运维·chrome·nginx
小鹿软件办公1 天前
Google 在 Chrome 和搜索中加入 SynthID AI 图像检测功能
前端·人工智能·chrome
闫记康2 天前
Linux学习day5
linux·chrome·学习
嵌入式小站2 天前
STM32 零基础可移植教程 05:按键消抖,为什么按一次会触发好几次
chrome·stm32·嵌入式硬件
音视频牛哥2 天前
大牛直播SDK(SmartMediaKit)Windows平台RTSP/RTMP直播播放SDK集成说明(C++版)
windows·音视频·实时音视频·windows rtsp播放器·windows rtmp播放器·超低延迟rtsp播放器·超低延迟rtmp播放器