先上实现效果图

我们常见的网页播放视频，基本就是.mp4，或者就是blob
看下我本地实现的播放blob效果图

想要知道怎么实现blob播放，就继续往下看吧。

常见的视频格式

mp4格式

比如这个
https://haokan.baidu.com/v?vid=10059354104672194686&tab=dongman_new&sfrom=dongman_new
我们打开控制台，可以看到视频后缀为mp4

这样的直接播放的是一个完整的mp4文件，可以直接下载

src为blob

比如这个地址
https://www.pianku.li/py/lRGZzYzYphmY_1.html?153710

是一个blob，而且这个地址是打不开的
抓包会发现请求了 m3u8格式的文件，文件内容列举了很多.ts文件

这一个个的.ts文件就是视频切割后的小片段，.m3u8是视频的索引文件，是一个文本文件，并非视频文件。

那么我们要实现这种src为blob的，就需要使用支持播放.m3u8的播放器了。

支持.m3u8的播放器

dplayer

dplayer 官网 http://dplayer.js.org/zh/guide.html
其实就是要H5播放器能支持hls就可以实现播放.m3u8，这个播放器刚好支持。

在vue中实现播放.m3u8

添加依赖

npm install -S hls.js
npm install dplayer --save

因为要使用.m3u8所以要添加hls依赖

dplayer.vue

<202209late>
  <div>
    <div id="dplayer" ref="player" class="dplayer"></div>
  </div>
</202209late>

<script>
import Hls from 'hls.js'
import DPlayer from 'dplayer'

export default {
  data () {
    return {
      dp: null,
      video: {}
    }
  },
  methods: {
    loadVideo (videoInfo) {
      this.dp = new DPlayer({
        element: this.$refs.player,
        video: {
          //  pic: videoInfo.img, // 封面
          url: videoInfo.video,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  },
  mounted () {
    // getVideo: ajax request for getting videoInfo
    /*   getVideo().then(res => {
        this.video = res.data.video
        this.laodVideo(this.video)
      }) */
    this.video = {
      //封面
      //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
      video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
    }
    this.loadVideo(this.video)
  }
}
</script>
<style lang="less" scoped>
.dplayer {
  width: 500px;
}
</style>

或者直接使用一个静态页面

test.html

<!DOCTYPE html>
<html>

<head>
  <title>dplayer播放m3u8</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
  <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
  <style>
    #dplayer {
      width: 500px
    }
  </style>
  <script>
    function init() {
      const dp = new DPlayer({
        element: document.getElementById('dplayer'),
        video: {
          //  pic: videoInfo.img, // 封面
          url: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  </script>
</head>

<body onload="init()">
  <div>
    <div id="dplayer"></div>
  </div>
</body>
</html>

直接引用js，效果是一样的，直接双击打开就可以看到效果了。

视频已经是blob了
真实请求的是

这样其实简单的实现了视频src为blob,播放.m3u8。dplayer的更多配置参数请看官网 http://dplayer.js.org/zh/guide.html
是不是很简单，这个.m3u8文件是外链的别人的网站，现在很多电影网站都是这样的，外链的别人的电影资源，如何将自己的视频转为.m3u8呢，那么请看这一篇使用ffmpeg 对mp4转.m3u8,ts 实现视频切片，这样就可以从自己的服务端获取视频分片，并播放。

还有很多支持.m3u8的播放器，大家可以搜索支持hls的H5播放器，会有很多结果，基本都大同小异，选择一个适合自己的就可以了。

有兴趣也可以参考这个地址了解

https://edgeone.ai/blog/details/m3u8