老板的灵魂提问: 别人家的视频能自动播放为什么你开发的无法自动播放为什么网页上的音视频无法自动播放了

作者:神秘网友 发布时间:2021-12-07 13:04:26

老板的灵魂提问: 别人家的视频能自动播放为什么你开发的无法自动播放为什么网页上的音视频无法自动播放了

先上结论,根据新政策,媒体内容将被允许在以下条件下自动播放:

  • 内容已静音,或不包含任何音频(仅限视频)
  • 用户在浏览会话期间点击或点击网站上的某处
  • 在移动设备上,如果用户已将站点添加到主屏幕
  • 在桌面上,如果用户经常在网站上播放媒体,根据媒体参与指数

以下文章为机翻与人翻相结合

Chrome 中的 video 视频自动播放政策说明

改善用户体验,最大限度地减少安装广告拦截器的动机,并减少数据消耗

Chrome 66 中针对音频和视频元素启动的自动播放策略有效地阻止了 Chrome 中大约一半不需要的媒体自动播放。对于 Web Audio API,Chrome 71 中启动了自动播放策略。这会影响网页游戏、某些 WebRTC 应用程序和其他使用音频功能的网页。可以在下面的Web Audio API部分找到更多详细信息。

Chrome 的自动播放政策在 2018 年 4 月发生了变化,我在这里告诉您为什么以及如何影响带声音的视频播放。

用户会喜欢这个新功能的!

chrome 会找到并阻止网页中“恶意”的视频自动播,比如恶意广告内有声视频自动播放

但老板不会喜欢它的!!所以开发者也不会喜欢它的

新特性!!!

您可能已经注意到,网络浏览器正朝着更严格的自动播放策略发展,以改善用户体验、最大限度地减少安装广告拦截器的动机,并减少昂贵和/或受限网络上的数据消耗。这些更改旨在为用户提供更大的播放控制权,并使具有合法用例的发布商受益。


Chrome 的自动播放策略很简单:

  • 始终允许静音自动播放。
  • 在以下情况下允许自动播放声音:
    • 用户与域进行了交互(单击、点击等)。
    • 在桌面上,用户的媒体参与指数阈值已被超过,这意味着用户之前曾播放过有声视频。
    • 用户已将该站点添加到其移动设备的主屏幕或在桌面设备上安装了 PWA。
  • 顶级框架可以将自动播放权限委托给它们的 iframe 以允许自动播放声音。


媒体参与指数

媒体参与指数 (MEI) 衡量个人在网站上消费媒体的倾向。Chrome 的方法是访问每个来源的重要媒体播放事件的比率:

  • 媒体(音频/视频)的消耗必须大于 7 秒。
  • 音频必须存在且未静音。
  • 带有视频的选项卡处于活动状态。
  • 视频的大小(以像素为单位)必须大于200x140。

Chrome 从中计算出媒体参与度分数,该分数在定期播放媒体的网站上最高。当它足够高时,桌面web端的视频就可以允许自动播放(对于普通开发者来说这分数感觉是玄学,老板再问要多少分数时,就无法回答了...)

用户的 MEI 可在about://media-engagement内部页面获得。

about://media-engagementChrome 内部页面的屏幕截图。

开发者建议

  • 谨慎使用自动播放。自动播放可以是一个强大的参与工具,但如果播放了不想要的声音或者他们认为由于不需要的视频播放而导致不必要的资源使用(例如数据、电池),它也会惹恼用户。
  • 如果您确实想使用自动播放,请考虑从静音内容开始,如果用户有兴趣探索更多内容,则让他们取消静音。许多网站和社交网络正在有效地使用这种技术。
  • 除非有特殊原因,否则我们建议使用浏览器的本机控件进行视频和音频播放。这将确保正确处理自动播放策略。
  • 如果您使用自定义媒体控件,请确保您的网站在不允许自动播放时正常运行。我们建议您始终查看 play 函数返回的 promise,看看它是否被拒绝:

开发者模式切换

作为开发人员,您可能希望在本地更改 Chrome 自动播放策略行为,以测试您网站的不同用户参与度。

  • 您可以使用命令行完全禁用自动播放策略:chrome.exe --autoplay-policy=no-user-gesture-required。这使您可以测试您的网站,就好像用户与您的网站有很强的互动一样,并且始终允许播放自动播放。

  • 您还可以决定通过禁用 MEI 以及是否默认情况下为新用户自动播放具有最高整体 MEI 的站点来确保永远不允许自动播放。chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies

iframe 委托

默认情况下,嵌入式 IFrame 只能播放静音或无声视频。但是,如果网站所有者希望他们网站上的 IFrame 能够播放未静音的内容,他们可以使用allow=autoplay将自动播放权限传递给 IFrame。此属性允许 IFrame 中包含的任何视频播放,就像它托管在网站上一样。

一个权限的政策使开发人员可以选择性地启用和禁用浏览器功能和API。一旦源获得了自动播放权限,它就可以将该权限委托给具有autoplay 权限策略的跨源 iframe。请注意,默认情况下,同源 iframe 允许自动播放。

!-- Autoplay is allowed. --
iframe src="https://cross-origin.com/myvideo.html" allow="autoplay"

!-- Autoplay and Fullscreen are allowed. --
iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"

当自动播放的权限策略被禁用时,在play()没有用户手势的情况下调用将使用NotAllowedErrorDOMException。并且自动播放属性也将被忽略。

例子,哪些类型的网站允许,哪些类型的网站不允许

示例 1:每次用户访问VideoSubscriptionSite.com他们的笔记本电脑时,他们都会观看电视节目或电影。由于他们的媒体参与度得分很高,因此允许自动播放。

示例 2:同时GlobalNewsSite.com具有文本和视频内容。大多数用户只是偶尔访问该网站以获取文本内容和观看视频。用户的媒体参与度得分较低,因此如果用户直接从社交媒体页面或搜索进行导航,则不允许自动播放。

示例 3:同时LocalNewsSite.com具有文本和视频内容。大多数人通过主页进入网站,然后点击新闻文章。由于用户与域的交互,将允许在新闻文章页面上自动播放。但是,应注意确保用户不会对自动播放内容感到惊讶。

示例 4:MyMovieReviewBlog.com嵌入带有电影预告片的 iframe 以进行评论。用户与域交互以访问博客,因此允许自动播放。但是,博客需要将给 iframe 添加权限允许播放,以便内容自动播放。

Web 开发人员的最佳实践

音频/视频元素

这是要记住的一件事:永远不要假设视频会播放,也不要在视频没有实际播放时显示暂停按钮。这非常重要,我将在下面再写一次,供那些只是浏览那篇文章的人使用。

不要假设视频会播放,也不要在视频没有实际播放时显示暂停按钮。

您应该始终查看play 函数返回的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.
  });
}
警告

不要在没有显示任何媒体控件的情况下播放插页式广告,因为它们可能不会自动播放,用户将无法开始播放。

吸引用户的一种很酷的方法是使用静音自动播放并让他们选择取消静音。

(请参见下面的示例。)一些网站已经有效地做到了这一点,包括 Facebook、Instagram、Twitter 和 YouTube。

video  muted autoplay
button /button

script
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
/script

触发用户激活的事件仍需跨浏览器统一定义。我建议你"click"暂时坚持。请参阅GitHub 问题 whatwg/html#3849。

网络音频

该网络音频API,因为Chrome浏览器71.已涵盖自动播放有几件事情需要了解它。首先,在开始音频播放之前等待用户交互是一种很好的做法,以便用户知道发生了一些事情。例如,想想“播放”按钮或“开/关”开关。您还可以根据应用程序的流程添加“取消静音”按钮。

如果AudioContext在文档接收到用户手势之前创建了一个,它会在“暂停”状态下创建,你需要resume()在用户手势之后调用。 页面加载完后想播放 AudioContext,则必须在用户与页面交互后的某个时间调用 resume()(例如,在用户单击按钮后)。或者,AudioContext如果start()在任何附加节点上调用,将在用户手势后恢复。
// 其它原先代码不用变动
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// 用户交互后重播
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() = {
    console.log('Playback resumed successfully');
  });
});

在用户交互时初始化AudioContext 也行

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

要检测浏览器是否需要用户交互才能播放音频,请AudioContext.state在创建后检查。如果允许播放,则应立即切换到running。否则就会suspended。如果您侦听该statechange事件,则可以异步检测更改。


google 原文链接 https://developer.chrome.com/blog/autoplay/

注:转载请注明出处博客园:sheldon(willian12345@126.com)

https://github.com/willian12345


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

老板的灵魂提问: 别人家的视频能自动播放为什么你开发的无法自动播放为什么网页上的音视频无法自动播放了 相关文章

  1. Win7光盘无法自动播放怎么办电脑自动播放光盘教程

    虽然现在网络上视频资源很多,但依旧有不少人在使用光盘,特别是一些书籍配置的教学光盘。有朋友将光盘放入光驱的时候,发现光盘无法自动播放,但是可以手动播放,使用起来非常不便利。那么Win7光盘无法自动播放要如...

  2. 电脑网页视频无法播放怎么处理

    电脑网页视频无法播放怎么处理?无论是部分网页中的视频还是全网任意网站视频、Flash动画、网页动态元素,出现点击无效,或者黑屏无加载,以及视频位置左上角或中央有叉叉,都可以使用以下方案中的方法解决问题。 电脑...

  3. chrome播放video无法自动播放

    Chrome下调用play后抱错:DOMException: play() failed because the user didn"t interact with the document first. 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在

  4. RecycleView指定滑动指定位置自动播放视频

    RecycleView指定滑动指定位置自动播放视频 思路1 1.获取屏幕中要播放的中心点 //限定范围为屏幕一半的上下偏移180 int playTop = CommonUtil.getScreenHeight(getActivity()) / 2 - CommonUtil.dip2px(getActivity(), 180); int playBottom = CommonUtil.getS

  5. facebook轮播视频_如何阻止Facebook视频自动播放

    facebook轮播视频_如何阻止Facebook视频自动播放 facebook轮播视频 ( How to Disable Auto-Playon Mobile Devices ) To disable auto-playing video on Facebook’s mobile applications, we need to head over to the settings menu. We’re using iOS for

  6. Win10系统光盘无法自动播放如何解决

    很多Win10用户在反映光盘无法自动播放,这是怎么回事呢?其实这是因为Win10系统的安全软件或优化工具关闭了光盘的自动播放功能造成的。那么遇到这种问题该怎么解决呢?下面小编为大家介绍一下Win10系统光盘无法自动播放的...

  7. 谷歌(chrome)浏览器不能自动播放视频video标签

    谷歌(chrome)浏览器不能自动播放视频video标签 问题:VIDEO播放视频只有声音不出现画面 原因:视频格式有问题 mp4的视频编码有三种:MPEG4(DivX),MPEG4(Xvid),AVC(H264) 使用H264格式,视频播放正常 问题:谷歌浏览器不能自动播放视频video标...

  8. vue-seamless-scroll无法自动播放

    vue-seamless-scroll无法自动播放 如果说是正常使用的话 肯定是没有任何问题的 但是结合表格时候 进行封装 最终遍历的肯定是一个对象 这时候对象里面的key就不能有冗杂的 后台给你返回数据的时候 你肯定是要处理的 问题就是出...

  9. MAC下如何让QuickTime Player X打开视频后自动播放

    QuickTime Player 是MAC电脑自带的一款视频播放器,深受广大用户们的喜爱,不过使用QuickTime Player 播放视频时,有一点很麻烦的就是打开视频后,默认是暂停的,要再次点击播放。那么该如何解决这个问题呢?现在就让小编来告诉...

  10. 迪士尼源码_如何在迪士尼+上禁用自动播放和背景视频

    迪士尼源码_如何在迪士尼+上禁用自动播放和背景视频 迪士尼源码 ( Disable Autoplay on iPhone, iPad, and Android ) At launch, the Disney+ app doesn’t appear to display background videos on the homepage automatically. As such, the only setting

  11. 天天看播放器无法播放视频的具体解决方法

    天天看播放器无法播放视频怎么办?天天看高清影视播放器是款非常受欢迎的网络视频播放器,用户们可在线享受丰富多彩的直播和点播节目,有时候我们会遇到天天看播放器出现不可以播放的情况,这该如何解决呢?下面小编...

  12. Win10自带的播放器显示无法播放视频怎么解决

    Win10系统中自带的视频播放器叫做电影和电视,有些用户习惯使用该应用。但在使用的过程难免会遇到一些问题,例如最近就有网友反馈说自己的win10纯净版电脑出现了自带播放器显示无法播放视频的情况,不知道怎么很是苦恼...

  13. 电脑播放视频提示视频文件无法渲染的解决方法

    我们在看某个视频的时候,需要解码才可以看。在的影片的编码方式很多,这样在播放的时候就要有相应的解码方式。但其中一些播放器的解码器不完整,因此不能放影相应的文件,那怎么办呢?下面就和大家说一下电脑播放视...

  14. 使用Mac时Coursera视频无法播放的解决方法

    使用Mac时Coursera视频无法播放的解决方法 1.解决方法 修改/private/etc文件,末尾追加一行: 52.84.246.72 d3c33hcgiwev3.cloudfront.net 刷新Coursera课程页面(command + r),即可观看。 2.修改 hosts 文件方法有两个: 1.图形界面工具 1)finder右键...

  15. 微信里面打开网页可自动播放的代码IOS测试没问题

    微信里面打开网页可自动播放的视频代码IOS测试没问题 !DOCTYPE HTMLhtmlbodyvideo id= " videoID " src= " 1.MP4 " autoplay= " autoplay " controls= " controls " your browser does not support the video tag /video/body/htmlscript document.addEventL

  16. 多网页音乐自动播放

    多网页音乐自动播放 html里面 videoaudio 标签都有autoplay选项 但其实你不能自动播放 这是跟web安全有关,所以你必须要获取用户全选许可 以firefox为例 点击url左边的那个,会弹出让你授予权限,你插播地视频,音乐就可以播放了 ...

  17. 爱奇艺怎么视频无法播放

    爱奇艺怎么视频无法播放?很多朋友的电脑在升级完系统或者flash之后,就无法观看爱奇艺视频了,是怎么回事呢?下面,小编为大家介绍下爱奇艺视频无法播放。 1、电脑缓存过多 解决方法:点击设置--程序管理--找到爱奇艺程...

  18. 如何解决RTSP视频平台EasyNVR注册EasyNVS视频无法播放问题

    如何解决RTSP视频平台EasyNVR注册EasyNVS视频无法播放问题? TSINGSEE开发的EasyNVR视频平台很早就上线了,运用EasyNVR作为监控直播的项目团队也非常多。随着这些团队的场景需求不断扩张,越来越多的用户需要在不同场景部署多套Easy...

  19. 网页音乐 最小化后自动暂停_当其他声音开始播放时如何自动暂停音

    网页音乐 最小化后自动暂停_当其他声音开始播放时,如何自动暂停音乐 网页音乐 最小化后自动暂停 ( Mute.fm Pauses Music on Windows ) Head to the mute.fm homepage and download the latest version, which comes as an EXE installer. Once the program

  20. 最近发现kingeditor编辑器插入视频无法播放

    最近发现kingeditor编辑器插入视频无法播放 最近发现kingeditor编辑器插入视频无法播放 最近用到kingEditor编辑器,发现在添加上传视频的时候(下图)是无法播放的,而且在查看源代码的时候发现是embed标签并不是video标签,于是就...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词