html 播放卡顿，解决办法

最新推荐文章于 2025-04-09 20:32:53 发布

_杯美式

最新推荐文章于 2025-04-09 20:32:53 发布

阅读量105

点赞数 2

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/JQ971/article/details/146637477

版权

思路：把MP4文件切成m3u8片段，放入阿里云储存。基本上可以实现秒加载

准备：ffmpeg（mp4转m3u8）

1.安装ffmpeg

ffmpeg.zip - 蓝奏云

2.配置用户环境变量 path

例子：Q:\test\ffmpeg\bin

3.找到mp4文件目录执行cmd

ffmpeg -i 1.mp4 -profile:v  baseline -level 3.0 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls there.m3u8

1.mp4 - 要转的文件名

there.m3u8 - 转换完的文件名（转换完很多文件，打包，video引入there.m3u8即可）

复制代码运行即可

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>私域视频</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<video id="video" controls style="width: 100%;"></video>

		<script>
            initVideo('src');  // 配置视频地址
			function initVideo(src) {
				var video = document.getElementById("video");
				if (Hls.isSupported()) {
					var hls = new Hls();
					hls.loadSource(src);
					hls.attachMedia(video);
					hls.on(Hls.Events.MANIFEST_PARSED, function() {
						// video.play();
					});
				} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
					video.src = "src";
					video.addEventListener("loadedmetadata", function() {
						// video.play();
					});
				}
			}
		</script>
	</body>
</html>