我正在使用Vimeo及其自动播放功能。问题是自动播放功能无法在移动设备上使用,而且我有一些计时器会假设视频已经自动播放。我知道视频播放时会触发一个事件,但我似乎可以找到关于如何判断自动播放是否正常工作的任何信息。有没有办法说明自动播放是否在编程上工作。我想要做的就是这样..检测Vimeo视频是否会自动播放
自动播放在这个设备上工作或自动播放火吗? 如果不忘记定时器并立即显示所有内容。
我正在使用Vimeo及其自动播放功能。问题是自动播放功能无法在移动设备上使用,而且我有一些计时器会假设视频已经自动播放。我知道视频播放时会触发一个事件,但我似乎可以找到关于如何判断自动播放是否正常工作的任何信息。有没有办法说明自动播放是否在编程上工作。我想要做的就是这样..检测Vimeo视频是否会自动播放
自动播放在这个设备上工作或自动播放火吗? 如果不忘记定时器并立即显示所有内容。
正如您所说,Vimeo Player的自动播放功能在移动设备上无法正常工作(这在this article中得到了通知),并且JavaScript API似乎在这些设备上被破坏。您仍然可以使用Vimeo's Player JavaScript API来操作非移动设备上的视频,并推断移动设备是否支持JavaScript API。
确定是否自动播放的工作在非移动设备:
要检查是否自动播放已经开始在这些设备上都VIMEO播放器的工作原理,你可以结合player.getPaused()
准备在网页上使用的play
事件。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<iframe id="player" src="https://player.vimeo.com/video/78716964?autoplay=1&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script>
var player = new Vimeo.Player($('#player'));
var state = { autoplaying : false };
player.on('play',() => {
state.autoplaying = true;
player.off('play');
});
player.getPaused().then((paused) => {
var playing = !paused;
state.autoplaying = state.autoplaying || playing;
});
</script>
</body>
</html>
确定是否自动播放的工作在移动设备上:
现在有没有干净的方式来确定此移动设备上,因为的JavaScript API是坏了。您可以尝试通过调用任何API方法来检测JavaScript API是否已启用并等待承诺结果。如果结果没有在短时间内出现,那么你可以说API不起作用。所以,让我们假设自动播放不起作用。
var player = new Vimeo.Player($('#player'));
var state = {
autoplaying : false,
apiEnabled : null
};
player.on('play',() => {
state.autoplaying = true;
player.off('play');
});
setTimeout(() => {
if (state.apiEnabled === null) {
state.apiEnabled = false;
// Do something
}
}, 100);
player.getPaused().then((paused) => {
state.apiEnabled = true;
// Do something
});
你也可以使用一些像TECHNIC以detecting user agent确定,如果你是在移动设备,因此假设自动播放未执行。
我建议你不要破解Vimeo的iframe来确定自动播放状态。公共API应该是为了确保您的脚本将来能够正常工作的方式。