济宁手机网站建设公司,php 网站,为企业开发网站,乐从网站建设公司说明
在web应用开发时遇到在线播放m3u8格式视频#xff0c;由于m3u8是多分片视频#xff0c;原生video标签无法直接播放#xff0c;所以需要js对m3u8处理才能播放#xff0c;网上有很多插件#xff0c;这里我选择最近简单方法hls.js播放#xff0c;引入一个js文件即可。…说明
在web应用开发时遇到在线播放m3u8格式视频由于m3u8是多分片视频原生video标签无法直接播放所以需要js对m3u8处理才能播放网上有很多插件这里我选择最近简单方法hls.js播放引入一个js文件即可。
实现代码
Gin后端
后端用c.File返回数据c是gin请求信息
//fileName 是文件名称如demo.m3u8
c.Header(Content-Type, application/octet-stream)
c.Header(Content-Disposition, attachment; filenamefname)
c.Header(Content-Disposition, inline;filenamefname)
c.Header(Content-Transfer-Encoding, binary)
//返回视频内容
c.File(filepath.Join(path, fileName))
前端
这里用h5给大家演示使用vue的开发发展自己根据请求引入。
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title演示web点播m3u8(hls)格式视频/title
style
/style
/head
body
div classcontainerdiv classcontainer stylewidth: 96%; margin: 30px autovideo idvideo controls loopfalse width100%/video/div
/div
script srchls.js/scriptscript
var video document.getElementById(video);if(Hls.isSupported()) {var hls new Hls();hls.loadSource(https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8);hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();});}
/script
/body
/html
hls.js代码
hls.js内容太多无法插入绑定在本文资源中。
