一丶静态资源准备
首先这里有一个处理好的hls视频插件demo,因为视频格式过大所以大部分开源的这些demo没有视频,需要自己加一个video的文件夹,在video中放入index.m3u8 格式的视频(如果没有建议自己找个mp4通过ffmpeg进行分片,这里不做分片详解了,我也不会,可以下载一个爱奇艺万能联播,然后通过改后缀名,再通过爱奇艺万能联播检查更改后缀之后能否正常播放),在每一个html的界面都有相对的src路径。静态资源准备好之后进行下一步。
二丶模拟静态服务
本地项目下载到本地之后,可通过http-server启动静态服务器来检查demo是否可以正常运行。这是我的路径。这是我的文件名。
打开资源管理器Win+R,进入该文件
并执行http-server -a 127.0.0.1 -p 8080命令 ,
出现该命令说明服务启动成功了。
三丶在页面中进行运行
在浏览器中输入服务器ip已经要访问的html文件即可。
代理服务器成功,hls引入成功。将此demo放入所需项目后调用即可。如果要使用移动端那么就需要代理服务器,charles代理服务器即可在移动端访问