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

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

作者:互联网

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

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

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

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

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

 

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

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

 

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

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

新特性!!!

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


 

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

 


  

媒体参与指数

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

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

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

 

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

开发者建议

开发者模式切换

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

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 id="video" muted autoplay>
<button id="unmuteButton"></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

                 

标签:视频,Chrome,自动播放,用户,音视频,无法,允许,播放
来源: https://www.cnblogs.com/willian/p/15655756.html