前言
网络上经常是以m3u8文件传输视频流的 ，但是有时网络慢往往导致视频播放卡顿。于是我在想能不能先下载然后再播放呢？于是尝试下载然后实现本地播放m3u8视频。
正文
1.找到网络视频流的m3u8连接
一般在浏览器按F12就可以看到有请求视频流的连接。
2.通过迅雷下载
复制链接到迅雷，新增下载任务，！！下载的时候设置好中文名字和选集（后面需要用到）。
3.下载后的文件正常是可以在迅雷上播放
4.实现在本地浏览器播放
5.播放器代码
index.html
<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>HLS Video Player</title>
</head>
<body style="background-color: rgb(199, 195, 195);">
<video id="video" controls width="100%"></video>
<div>
<input type="text" id="myInput" placeholder="请输入名称">
<button onclick="OnPlay()">播放</button>
</div>
<div id="text-container">
<!-- 文本内容将被插入到这里 -->
</div>
<script src="hls.js"></script>
<script>
console.log(window.location.hostname + window.location.port);
//获取文件内容
document.addEventListener('DOMContentLoaded', function () {
fetch('./m3u8/name.txt')
.then(response => response.text())
.then(text => {
document.getElementById('text-container').innerText = text;
})
.catch(error => {
console.error('Error loading text file:', error);
document.getElementById('text-container').innerText = 'Error loading text file';
});
});
function OnPlay() {
var inputValue = document.getElementById('myInput').value;
var video = document.getElementById('video');
var hls = new Hls();
console.log(window.location.hostname + ":" + window.location.port + "/m3u8/" + inputValue + "/index.m3u8");
hls.loadSource("http://" + window.location.hostname + ":" + window.location.port + "/m3u8/" + inputValue + "/index.m3u8/index.m3u8");
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
</script>
</body>
</html>
hls.js
源码下载链接
https://download.csdn.net/download/weixin_42401291/90108896
6.此时可以通过浏览器正常播放网络的m3u8视频
但是还是网络视频不能播放本地的视频
7.我们需要用到IIS部署网页和转发m3u8视频流
部署后局域网内都是可以实现播放视频的
8.windos 10安装IIS
勾选后点击确认安装
等待安装
9.打开IIS
10.创建网站
右键创建网站
选择index.html文件目录
设置可以传输的文件格式
新增MIME类型
.m3u8
application/x-mpegURL
创建m3u8视频存放文件夹
复制之前下载的视频文件到文件夹中
执行生成名称列表脚本
11.此时可以通过本机ip加端口访问播放器网页了
此时通过名字就可以播放视频了
同一个局域也是如此
最后
通过以上步骤已经完成实现本地播放m3u8视频，部署过程有什么疑问欢迎探讨。
UI优化后是不是就一个视频网站了？
