具有静音和自动播放功能的HLS /媒体源扩展<视频>在手机的第一帧时冻结

时间:2018-12-10 22:46:39

标签: html reactjs html5-video hls next.js

我试图将英雄背景视频添加到我们的网站。它是从mux.com提供的。

我将它与HLS一起使用,但对于Chrome,它使用我收集到的媒体源扩展名。

我知道要使HTML5视频能够自动播放,也必须将其静音,并且在那边我都有两个参数。

显然,在Android Chrome上,我的行为是它冻结在第一帧(黑色)上,但没有继续,并且我无法找到原因。

在冻结的情况下,它仍然会加载视频,只是不会自动播放。

我一无所知。


隔离沙箱:

https://codesandbox.io/s/32yky6x7mq

https://32yky6x7mq.codesandbox.io/

在我的尝试中,我将其简化为带有Hls.js库和基本<video>标签的简单HTML应用程序,该标签在手机上会中断。


如何使视频在手机上自动播放?

P.S。要确切查看我尝试过的内容,请参阅编辑历史记录,因为我已经尝试了很多东西。

1 个答案:

答案 0 :(得分:0)

在我的设备上(特别是Android Chrome),这是由数据保护程序引起的。

禁用数据保护程序,视频会自动播放。
这是自相矛盾的,因为我希望使用 Data Saver 完全不加载视频,但是正在加载视频,而自动播放却被打断-导致更多浪费。

可能,还有其他一些设置阻止自动播放,例如,无法找到iOS无法正常运行的确切原因。有关于playsinline属性的提示,我尚未测试过。 (我会更新)

值得一提的是Feature-Policy标头:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
在我的情况下,它没有帮助,但可能与其他情况下的自动播放有关。