javascript - 平板电脑/手机的视频自动播放嗅探器 - "canPlayType"不适用

Question

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

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

感谢您加入此讨论!

Answer 1

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

理论上 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，这样您就不必浪费开始时间-后续访问的正常运行时间。

在此示例中，我使用了 .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>