Gin框架html/vue前端使用hls.js播放/点播m3u8(hls)格式视频

说明

在web应用开发时遇到在线播放m3u8格式视频，由于m3u8是多分片视频，原生video标签无法直接播放，所以需要js对m3u8处理才能播放，网上有很多插件，这里我选择最近简单方法hls.js播放，引入一个js文件即可。

实现代码

Gin后端

后端用c.File返回数据，c是gin请求信息

Go 复制代码

//fileName 是文件名称，如：demo.m3u8
c.Header("Content-Type", "application/octet-stream")
c.Header("Content-Disposition", "attachment; filename="+fname)
c.Header("Content-Disposition", "inline;filename="+fname)
c.Header("Content-Transfer-Encoding", "binary")
//返回视频内容
c.File(filepath.Join(path, fileName))

前端

这里用h5给大家演示，使用vue的开发发展自己根据请求引入。

html代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>演示：web点播m3u8(hls)格式视频</title>
<style>
</style>
</head>
<body>
<div class="container">
    <div class="container" style="width: 96%; margin: 30px auto">
        <video id="video" controls loop="false" width="100%"></video>
    </div>
</div>
<script src="hls.js"></script>

<script>
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内容太多无法插入，绑定在本文资源中。