javascript - 平板电脑/移动设备的视频自动播放嗅探器 - “canPlayType”不适用

Question

我想找出不支持视频自动播放的平台（手机、平板电脑）。有没有可靠的方法来做到这一点？到目前为止，我唯一的另一个选择似乎是一个完整的用户代理嗅探器。

相关：横向或纵向的@media 查询对于嗅探手持设备是否可靠？我想如果设备返回“横向”或“纵向”，它可能是手持设备，因此不太可能支持自动播放？

感谢您加入此讨论！

Answer 1

landscapeorportrait查询只会真正告诉您浏览器窗口的纵横比，因此不可靠

理论上handheld媒体查询将正确响应当前浏览器，并且在媒体查询中它似乎可以工作

<style> 
@media handheld only { body { background: #00ff00};}
</style>

但是，handheld在代码中测试该属性时，我运气不佳（handheld总是为我返回 false，screen例如，总是返回 true）

if (window.matchMedia('handheld').matches) {
    // do some code for a handheld device
}

所以... 是时候制定 B 计划了

我能想到的可靠测试的唯一方法是尝试自动播放，同时触发一个计时器......如果在计时器触发时视频没有开始播放，那么假设它不能。这不是一个优雅的解决方案（为了让计时器正确考虑视频/缓冲等的大小，需要进行一些捏造），您可能希望对结果进行 cookie，这样您就不必浪费 start-后续访问的正常运行时间。

在这个示例中，我使用了 0.5 秒的延迟，并检查progress了标签上的事件<video>......取决于您的场景和视频的大小等，您可能想要进行实验。在 iPad、Nexus7、Nexus4 和 Kindle HDX 上进行了测试，似乎相当可靠

<video id="videoPlayer" autoplay controls>
    <source src="Video.mp4" type="video/mp4">
</video>

<script>
var playing = false
var waitAndSee = 500; // this allows 0.5s for the video to show progress

var video = document.getElementById('videoPlayer');
video.addEventListener('progress',function(e){
    playing = true
}); 

var counter=setTimeout ( "didItStart()", waitAndSee );

function didItStart() { 
    clearTimeout(counter);
    if (playing) {
    document.write("it started")
    } else {
    document.write("it didn't")
    }
}

</script>