我想跟踪在 HTML5 视频中执行的搜索。为此,我需要知道seek-from 和seek-to 位置。虽然获得第二个是微不足道的(只需要收听 seeked
事件),但我不知道如何获得第一个。
过去,我使用过自定义控件,因此在收听 时,我可以在手动更改它以执行搜索之前保存
事件或我渲染的任何内容。currentTime
进度条的 mousedown
现在,我想用标准控件来做到这一点,但我无法捕捉到最后播放的位置。
我什至尝试在 video
元素上监听 mousedown
事件,但它仅在选择 outside 控制区域时触发...
let video = document.getElementsByTagName('video')[0];
let list = document.getElementsByTagName('ul')[0];
function log(name, time) {
let li = document.createElement('li');
li.textContent = name + ': ' + time;
list.appendChild(li);
}
video.addEventListener('seeked', e => {
log('seeked', e.target.currentTime);
});
video.addEventListener('mousedown', e => {
log('mousedown', e.target.currentTime);
});
<video width="300" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" controls></video>
<ul>
</ul>
谢谢!
最佳答案
您可以使用 timeupdate
事件来跟踪当前时间,然后当 seeked
事件发生时,您就知道最后一个已知的当前时间。
这里唯一的问题是,至少 Chrome 会在触发 seeked
之前触发 timeupdate
,这会破坏这种方法。但是我们可以使用 seeking
事件来知道什么时候应该停止跟踪当前时间。
唯一的缺点是,如果用户多次搜索到视频尚未加载的点,您只会获得第一个搜索开始位置。
let currentVideoTime = 0;
let saveCurrentTime = true;
video.addEventListener('seeked', e => {
log('seeked (started at ' + currentVideoTime + ')', e.target.currentTime);
saveCurrentTime = true;
});
video.addEventListener('seeking', e => {
log('seeking', e.target.currentTime);
saveCurrentTime = false;
});
video.addEventListener('timeupdate', e => {
log('timeupdate', e.target.currentTime);
if(saveCurrentTime)
currentVideoTime = e.target.currentTime;
});
关于javascript - HTML5 视频 : get seek-from position,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44457676/