在其他的浏览器中都可以,唯独在安卓端的qq浏览器中不行,代码如下,假设historyProgress是历史进度的百分比小数,
video.addEventListener('loadedmetadata', () => {
const currentTime = historyProgress* 0.01 * video.duration;
})
发现一直无法设置currentTime,经过一系列测试得知,是video.duration一直为0,猜测是时机不对,
解决:
- 先把video的autoplay 设置成true,(不设置成true,会造成qq浏览器里跳转后没有图的情况)
- 用canplay手动触发一下播放,如果一开始useEffect或者didmount的时候就让他play和pause一下,在安卓qq浏览器下不行,其他浏览器里可以,需要在用canplay事件里触发
video.addEventListener('canplay',()=>{
video.play();
video.pause()
})
3,再用durationchange,此时获取到的video.duration才是对的,并且设置了currentTime后,需要手动play和pause一下
video.addEventListener('durationchange', () => {
if (+historyProgress && +video.duration) {
const currentTime = +historyProgress * 0.01 * video.duration;
video.currentTime = currentTime;
video.play();
video.pause();
}
});
网友评论