Question

我尝试使用HTML5来模拟更强大的多媒体播放器，该播放器会在后台加载广告，并根据需要在视频和广告之间进行切换。

我遇到的第一个挑战是，大多数移动设备都不允许您预加载视频，这意味着在后台加载广告的概念＆＃34;是不可能的。相反，我采用了一种不那么优雅的方法：拥有一个<video>标记，并在投放广告时更改其src属性。这样做的好处是你可以使用现有的预加载和自动播放权限，但缺点是每次视频元素改变都会产生令人讨厌的缓冲。然而，这对我们的客户来说是可以接受的。

所以理想的行为是：

内容播放1分钟
广告播放1分钟
内容从2分钟开始恢复

我遇到的第二个挑战是让内容在正确的位置恢复。当您更改src属性时，视频将从时间0开始播放。因此，我不得不使用另一个丑陋的解决方案：等待视频加载（canPlayThrough事件）然后执行搜索期望的时间。这实际上导致它在从广告切换回内容时缓冲两次 - 但是不使用本机应用程序是可接受的成本。

为了弄清楚我们应该寻求的确切位置，我有一个虚拟内容播放器＆＃34;在后台运行。基本上是一个变量，用于存储当前时间并在<video>元素抛出updateTime事件时进行更新。随着广告的进展，虚拟内容以完全相同的速率前进。如果有时间切换回来，我们已经跳过了一分钟的内容。

我遇到的挑战是有时它寻求随机位置。我完全不知道为什么。例如，当我在7:39（459秒）播放广告时，控制台记录了不同的搜索事件，该广告应该在8:09（489秒）结束：

@@ seeking from: 30.06833267211914, to: 0
@@ seeked to: 0
Content currentTime: 0
Content currentTime: 489.0016784667969
@@ seeking from: 489.0016784667969, to: 489.0016784667969
Content currentTime: 489.0016784667969
@@ seeking from: 489.0016784667969, to: 489.0016784667969
Content currentTime: 489.0016784667969
@@ seeked to: 489.0016784667969
Content currentTime: 489.0016784667969
Content currentTime: 441.502197265625
Content currentTime: 441.3605346679683
Content currentTime: 441.6107177734375

解释您正在查看的内容：

我有一个seekFrom变量，在updateTime事件触发时会更新。这用于获取＆＃34;来自＆＃34; seeking事件期间的值。 to值等于video.currentTime。在seeked活动期间，我只显示video.currentTime。

所以最初有一个从30到0的搜索（这是＆＃34;寻找0＆＃34;在更改源时执行）。不久之后，当前时间变为489 ，之后触发了搜索事件。然后有两个寻找事件 - 一个表示从0变为489（自当前时间更新以来被误解为489到489），另一个表示从489到441的未经请求的变化（也被误解为489到489）当前时间已更新已故）。在此之后，当前时间变为441。

所有这些都是由以下两行代码创建的：

video.src = content.source;
video.currentTime = content.currentTime;

在运行这两行时，content.currentTime等于489.我没有手动设置video.currentTime，也没有在搜索栏上执行搜索。数字441似乎是凭空而来的，但如果我一遍又一遍地重播视频，它总是寻找这个完全相同的位置 - 所以必须有一些重要性。

所以问题是：

为什么在地球上寻求两次，我该如何阻止它？

注意：在Macbook Pro上使用QuickTime时都会遇到此问题。我还没有在iOS上进行测试（因为它不能正常工作），当我到达那里时Android将会是一个完全不同的问题。

另外，请注意：我在第二次搜索之前收到了seeking个事件 - 因此，如果HTML5中有任何方式可以取消＆＃34;取消＆＃34;寻求，这可能是一个可接受的解决方案。

Answer 1

不确定为什么有人投了一票...我不明白我的问题是不合法的。经过实验，研究和尝试每一个随机的建议，我可以在晦涩的博客文章中找到一些有用的东西：

iOS无法寻找小数位数。寻求491.337将失败，但寻求491将成功。

我刚刚添加了以下内容：

video.currentTime = content.currentTime | 0; // Shortcut for truncating positive integers

改变HTML5视频元素源后不久寻求的问题

1 个答案: