(TODO)如何让浏览器自动播放视频

这几天需要做一个通过手机操控远程页面交互的功能,其中一个交互就是在手机上控制远程页面播放视频。播放视频的实现很简单,我们采用了一个video.js这个插件,但是由于是通过手机自动控制视频播放,在远程页面上没有实际的用户交互,发现无法触发video的音频播放功能(静音模式的视频是可以自动播放的),即使我们模拟用户操作,通过JS去控制播放按钮的点击,也是不行的。

原因

经过查询资料,这是由于浏览器出于安全和用户体验考虑而做的一个限制。试想如果网页可以不经过用户操作就直接控制页面上音频的播放,那么用户一进入页面就听到播放的音频,这个体验是非常差的;如果网页在没有用户交互的情况下,可以触发页面的点击,那也会存在一些安全隐患。

解决方案

我们初期找的一些信息,都只是描述了原因,但是没有给出解决方案,这让我们误以为这个问题是无解的,我甚至一度想到是不是要用Electron做个视频播放器来解决这个问题(我似乎总是很容易将问题复杂化)。

后来发现其实官方已经给出了几个解决方案了,详见这个针对aotplay策略的变更文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Developer switches
As a developer, you may want to change Chrome autoplay policy behavior locally to test your website depending on user engagement.

You can decide to disable entirely the autoplay policy by setting the Chrome flag "Autoplay Policy" to "No user gesture is required" at chrome://flags/#autoplay-policy. This allows you to test your website as if user were strongly engaged with your site and playback autoplay would be always allowed.

You can also decide to make sure playback autoplay is never allowed by disabling use of MEI, applying autoplay policy to Web Audio, and whether sites with the highest overall MEI get playback autoplay by default for new users. This can be done with three internal switches with chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies.

Iframe delegation
A feature policy allows developers to selectively enable and disable use of various browser features and APIs. Once an origin has received autoplay permission, it can delegate that permission to cross-origin iframes with a new feature policy for autoplay. Note that autoplay is allowed by default on same-origin iframes.

<!-- 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">

When the feature policy for autoplay is disabled, calls to play() without a user gesture will reject the promise with a NotAllowedError DOMException. And the autoplay attribute will also be ignored.

Warning: Older articles incorrectly recommend using the attribute gesture=media which is not supported.
Example scenarios
Example 1: Every time a user visits VideoSubscriptionSite.com on their laptop they watch a TV show or a movie. As their media engagement score is high, autoplay is allowed.

Example 2: GlobalNewsSite.com has both text and video content. Most users go to the site for text content and watch videos only occasionally. Users' media engagement score is low, so autoplay wouldn't be allowed if a user navigates directly from a social media page or search.

Example 3: LocalNewsSite.com has both text and video content. Most people enter the site through the homepage and then click on the news articles. Autoplay on the news article pages would be allowed because of user interaction with the domain. However, care should be taken to make sure users aren't surprised by autoplaying content.

Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer to go along with their review. The user interacted with the domain to get to the specific blog, so autoplay is allowed. However, the blog needs to explicitly delegate that privilege to the iframe in order for the content to autoplay.

注意该文里面提到的修改浏览器autoplay策略的方法,在高版本的Chrome里面的操作方式已经发生了变更,应该在设置->网络设置里面,开启允许声音的选项。

总结

遇到问题先从逻辑上进行推理

像是这次的autoplay策略,按理来说浏览器是客户端程序,那么肯定是用户可以控制各种权限的。我首先想到的应该是去找到对应的权限设置功能,而不是直接瞎搜索。

不要将问题复杂化

比如我想到的通过Electron做个播放器来解决这个问题,就是尚未考虑其他简单方案之前,过早将问题复杂化了。我们之前根本就没接触过Electron,如果通过这个来做,且不说学习成本,光是里面为止的坑就会让时间评估不可控了。

作为业余时间的学习,去折腾下新技术是可以的;但是当我们处于有时间要求的具体问题场景中时,一定要尽量用你熟悉的技术和经验去解决问题,避免时间上的失控。