dplayer播放器切换flv和hls流

最新推荐文章于 2024-08-09 08:16:14 发布

孙憨憨

最新推荐文章于 2024-08-09 08:16:14 发布

阅读量2.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42402812/article/details/115905387

版权

安装

npm install dplayer --save、
npm install flv.js --save、
npm install hls.js --save、

使用页面

<template>
  <div>
    <div id="liveInMiGu"></div>
  </div>
</template>

<script>
import DPlayer from "dplayer";
import flvjs from "flv.js";
import Hls from "hls.js";
export default {
  name: "liveInMiGuList",
  components: {},
  props: {},
  data() {
    return {
    
       
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const options={
         container: document.getElementById(
          "liveInMiGu"),
        autoplay: true,
        screenshot: true,
        hotkey: false,
        live: true,
        volume: 0,
        video:{
        url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        type: "customFlv",
        quality: [
          {
             name: "FLV",
            url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
            type: "customFlv",
          },
          {
             name: "HLS",
            url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
            type: "customHls",
          }
        ],
        defaultQuality: 0,
        customType: {
          customHls: (video, player) => {
            const hls = new Hls({
              p2pConfig: {
                live: true, // 如果是直播设为true
              },
            });
            hls.loadSource(video.src);
            hls.attachMedia(video);
            player.events.on("destroy", () => {
              hls.destroy();
            });
          },
          customFlv: function (video, player) {
            const flvPlayer = flvjs.createPlayer({
              type: "flv",
              url: video.src,
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load();
            player.events.on("destroy", () => {
              flvPlayer.unload();
              flvPlayer.detachMediaElement();
              flvPlayer.destroy();
            });
          },
        },
      }
      }
    this.$nextTick(()=>{
       const dp = new DPlayer(options);
    })
   
  },
  methods: {},
};
</script>

<style scoped lang="scss">
</style>