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

最新推荐文章于 2024-05-14 14:40:40 发布

SUNbrightness

最新推荐文章于 2024-05-14 14:40:40 发布

阅读量1.2w

点赞数

分类专栏：前端多媒体处理

本文链接：https://blog.csdn.net/SUNbrightness/article/details/87823004

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

多媒体处理

4 篇文章 0 订阅

订阅专栏

本地资源无法快进

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

问题：

无法快进

<!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;
	}
});

手机端快进后回到进度跳到开始位置

发现在微信上如果对视频做出快进操作后，视频会莫名对从头播放（完全随机）。

通过学习视频多媒体处理、查看资料……得出以下结论：

关键帧概念：

视频中对关键帧是有限的，理论上我们快进的话只可以跳转到关键帧，因为非关键帧是无法播放的。

播放器对于视频快进的处理方式：

高性能浏览器解决方式：

当我们在电脑端浏览器对视频快进的时候，如果目标时间点不是关键帧，浏览器会对该部分视频重新解码，将这一秒变成关键帧，再次编码。所以电脑端或者部分性能强悍的播放器是可以随便跳转的。

低性能浏览器解决方式：

播放器会自动跳转到该时间点最近到关键帧。但是如果该时间点与关键帧的播放时间过长，将会重头播放视频。（目前发现手机端的微信H5播放器就是这样的）

对该情况的解决办法：

放弃低性能播放器的H5播放点跳转。
对源视频重新转码，并提高关键帧分布率。（本身码率就很低的视频，转码后效果依旧不理想）
使用HlS格式的流媒体格式视频，并且控制TS切片数量。

SUNbrightness

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5、微信无法快进、video currentTime 设定失效、重头开始播放。

本地资源无法快进今天工作中根据需求要求将本地视频，快进到一定时间再播放。结果发现了一个坑问题：无法快进<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...
复制链接

扫一扫