html5、微信无法快进、video currentTime 设定失效、重头开始播放。

视频快进难题解析

最新推荐文章于 2024-01-08 16:27:28 发布

原创最新推荐文章于 2024-01-08 16:27:28 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

多媒体处理

4 篇文章

订阅专栏

本文深入探讨了在不同浏览器及手机端微信上实现视频快进的挑战，包括关键帧概念、浏览器处理方式以及针对低性能播放器的解决方案。

本地资源无法快进

今天工作中根据需求要求将本地视频，快进到一定时间再播放。结果发现了一个坑

问题：

无法快进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<video height="200" width="200" src="../file/aaa.mp4" id="video1" autoplay="autoplay" controls >
		</video>
		
		
	<script type="text/javascript">
				var video = document.getElementById('video1');
				video.currentTime = 100;
				video.play();
	</script>
	</body>
</html>

解决方案

百度搜索得知，谷歌浏览器中若想使这个属性有效，需要src使用网络路径，本地资源在谷歌浏览器上是无法快进的。

必须使用类似这样的 http://www.scoure/try/sss/xx.mp4 url

手机端微信无法快进

在手机端上的时候，依旧出现了该问题。经查过大量baidu....，得出方案（都是前人的智慧）

如此设置


var video = document.getElementById('video');
var startTime= 20;
var b = true;
player.on('timeupdate',function(e){
	if(video.currentTime<startTime && b){
		//如果没有在播放状态一定要先播放再设置时间
		video.play();
		//转换成字符串再赋值，
		//部分浏览器必须这样做
		video.currentTime = startTime +'';

        b = false;
	}
});