跟踪观看视频的百分比不起作用（timeupdate 和 vimeo）。为什么？答案

【问题标题】：Tracking % video viewed not working (timeupdate & vimeo). Why?跟踪观看视频的百分比不起作用（timeupdate 和 vimeo）。为什么？
【发布时间】：2020-02-22 10:28:53
【问题描述】：

通过谷歌搜索，我想出了以下代码来跟踪播放、结束和视频进度（观看视频的百分比）。我使用Vimeo API Tracking 输入。

PLAY 和 END 工作。 TIMEUPDATE 在观看 10% 的视频时也可以使用，但不能在 console.log 中使用。我无法弄清楚我做错了什么。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>video-test-vimeo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        console.log('played the video!');
    });
	
	player.on('ended', function() {
        console.log('ended the video!');
    });
	
	player.on('timeupdate', function(data) {
		console.log('Percentage watched: '+data.percent);
    	if (data.percent == 0.1) {
			console.log('10% of video watched');
     	}
 });
</script>
</body>
</html>

【问题讨论】：

标签： javascript vimeo

【解决方案1】：

@Marten Hoekstra 不确定你是否解决了这个问题，但为了后代，我会给你一个完整的答案：

如果你运行你的代码，你会在控制台看到这个：

Percentage watched: 0.097 
Percentage watched: 0.101 
Percentage watched: 0.105

但是，当百分比正好为 0.1 时，您的代码行 if (data.percent == 0.1) 会尝试打印。这并没有清楚地发生。这是因为时间更新事件的性质，您可以在此处阅读：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event。这说：

事件频率取决于系统负载，但会在大约 4Hz 和 66Hz 之间抛出（假设事件处理程序的运行时间不超过 250 毫秒）。

这意味着尽管事件发生得非常频繁，但不足以确保该值永远是恰好 10%。因此，您应该在 if 语句中添加某种容差，这样您就不会依赖于确切的值。这可能是这样的：

const TOLERANCE = 0.002 

...

if (data.percent >= (0.1 - TOLERANCE) && data.percent <= (0.1 + TOLERANCE))

【讨论】：

【解决方案2】：

抱歉为时已晚，但刚刚找到了相同的替代方法。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>video-test-vimeo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = jQuery('.your_turn_vimeo_video iframe');
var vimeoPlayer = new Vimeo.Player(iframe);      

setInterval(function () {

    vimeoPlayer.getCurrentTime().then(function(seconds) {
   
        console.log( seconds, "current seconds " );

    });
        //console.log('it works' + new Date());
},1000);
</script>

这将每秒钟获取一次当前时间。所以你可以作为“timeupdate”更新的方式工作。

我希望这对其他用户也有帮助。谢谢:)

【讨论】：