H5/vue播放.m3u8视频 dplayer 篇 ‘推荐’

1.因业务需求，对接监控显示自己的系统中。2.前端框架vue3. 监控返回格式m3u8，视频流格式h264，如果视频流格式是h265的建议先把流转换h264。二 vue使用dplayer支持.m3u8的播放器dplayer 官网 http://dplayer.js.org/zh/guide.html安装依赖因为要使用.m3u8所以要添加hls依赖npm install -S hls.jsnpm i

邱志刚

7919人浏览 · 2022-03-04 14:04:35

邱志刚 · 2022-03-04 14:04:35 发布

在这里插入图片描述

1.因业务需求，对接监控显示自己的系统中。
2.前端框架vue
3. 监控返回格式m3u8，视频流格式h264，如果视频流格式是h265的建议先把流转换h264。

二 vue使用
dplayer支持.m3u8的播放器
dplayer 官网 http://dplayer.js.org/zh/guide.html

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

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

home.vue

<template>
  <div>
    <div id="dplayer" ref="player" class="dplayer"></div>
  </div>
</template>

<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>

index.html
demo

<!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: 600px
    }
  </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>