html|本地实现浏览器m3u8播放器，告别网络视频卡顿

news2024/12/12 19:44:30

前言

网络上经常是以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>