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

无延迟直播

视频加密与安全

在线导播台

相关推荐
小咖自动剪辑17 分钟前
视频去水印与去字幕教程:免费去水印软件与去字幕工具推荐
人工智能·音视频·实时音视频·视频编解码
charlie11451419122 分钟前
输入法处理杂谈——Windows 下的 IMM32 输入法处理机制和Chrome如何桥接TSF输入法
开发语言·chrome·windows·学习·输入法
TEL1892462247715 小时前
IT6225B:USB-C(DP Alt 模式)及电源传输控制器 内置双通道 DP 1.4 转 HDMI 2.0 转换器
音视频·实时音视频·视频编解码
我想发发发15 小时前
已经安装了ROS环境却还是报错`ModuleNotFoundError: No module named ‘rclpy‘`
前端·人工智能·chrome·机器人
AOwhisky1 天前
Ansible管理变量和事实(管理变量部分) & 部署文件到受管主机
前端·chrome·ansible
FreeBuf_1 天前
恶意Chrome扩展窃取钱包登录凭证并实施自动化交易
前端·chrome·自动化
奔跑的呱呱牛1 天前
解决MacOS下Chrome嗯下F5不刷新页面的问题
chrome·macos·mac
ChangYan.2 天前
monorepo 多包管理识别不到新增模块,解决办法
前端·chrome
小学生波波2 天前
HarmonyOS6 - XComponent与AVPlayer实现视频播放功能
arkts·鸿蒙·鸿蒙系统·视频播放·鸿蒙开发·harmonyos6
字节架构前端2 天前
媒体采集标准草案 与 Chromium 音频采集实现简介
前端·chrome·音视频开发