一段时间以来,我一直在对 HTML5 视频进行一些广泛的试验。一个似乎不断出现的问题是操纵 currentTime 属性。
这是我的项目和脚本的简要概述:
我有几个数组存储有关视频序列的信息(视频文件名、开始时间、持续时间、音频时间);基本功能是视频剪辑开始播放,下一个文件开始加载,当当前播放的视频达到其目标持续时间时,加载的视频开始播放等。目前我正在离线进行所有这些操作,所以实际下载时间对我来说还不是问题。所以为了简化,我的数组看起来像这样:
videoArray = ["clip01.webm", "clip05.webm", "clip03.webm"];
startArray = [0.5, 0, 1.5];
durationArray = [5, 2.1, 1.5];
我一直面临和解决的最大问题是设置每个视频的开始时间。每次我让它工作时,我似乎都必须在几周或几个月后找到一个新的解决方案。发生此问题的函数如下: 初始化第一个视频后,脚本调用时间更新函数(缩短代码):
function timeUpdate() {
var clip = document.getElementById(currentVideoTagId);
clipTime = clip.currentTime;
drawClip(clip); // function that displays the clip in a canvas element
switchClip(); // function that checks for clip's target duration
setTimeout(timeUpdate,40);
}
如您所见,此函数使用 SetTimeout 将 Video 绘制到 Canvas 元素中。这也是我不断检查 1)是否已加载下一个要播放的剪辑以及 2)当前播放的视频是否已达到其目标持续时间(缩短的代码)的地方:
function switchClip() {
if(!nextIsLoading){
loadClip(nextSequenceIndex); // function that sets the video source, etc
$("#" + nextVideoTagId).bind('canplay', function() {
this.currentTime = sequence.starts[nextSequenceIndex];
});
nextIsLoading = true;
}
if(clipTime >= currentCut){
playClip(); // function that starts playing the video
nextIsLoading = false;
}
}
所以使用检查'canplay'的jQuery绑定是我最新的解决方案,它已经工作了一段时间。我一直在 Mac for Chrome(最新版本)上进行所有实验。我用 PHP 从数据库中生成了我的序列数据。我最近切换到 PC(再次使用最新版本的 Chrome),因为我已经开始使用 Webmatrix 为这个新版本的项目生成我的序列数据。据我所知,该项目的 javaScript 部分基本上是相同的,除了设置 currentTime 之外,一切正常。
更准确地说:视频的 currentTime 仍然设置,我做了很多 console.logging 来观察正在发生的事情以及可能发生错误的地方,但是,对我来说最奇怪的事情发生在这里(缩短的代码):
function playClip(){
var newVideo = document.getElementById(currentVideoTagId);
console.log("currentTime before play: " + newVideo.currentTime);
newVideo.play();
console.log("currentTime after play: " + newVideo.currentTime);
}
此函数中的第一个日志始终显示我之前设置的 currentTime。在 play() 之后,currentTime 总是回到 0。
到目前为止,我已经测试了很多东西,我一直在谷歌和这里,在 Stackoverflow 上寻找答案(这就是这个解决方案最初是如何工作的),但我现在已经没有解决方案了.
有没有人可以对这个问题有所了解?
我希望这篇文章能提供关于这个问题的足够信息。