视频播放 xgplayer-flv在vue项目中实现（带测试demo）鸡

背藏玫瑰

已于 2022-09-21 16:55:19 修改

阅读量2.4k

点赞数

文章标签： javascript vue.js elementui

于 2022-05-12 17:01:40 首次发布

本文链接：https://blog.csdn.net/weixin_41127362/article/details/124735213

版权

<template>
  <aside class="animated" :class="{'video-full-wrapper': isFull, 'zoomIn': isFull}">
    <div
        :id="'play-flv-'+idIndex"
        class="xgplayer-skin-default"
        :class="'play-flv-'+idIndex"
    />
    <h3 v-if="videoTitle && showTitle"><i v-if="iconTitle" v-html="iconTitle"></i> {{videoTitle}} </h3>
  </aside>
<!--  <div
      :class="{'video-full-wrapper': isFull, 'zoomIn': isFull}"
      :id="'play-flv-'+idIndex"
      class="xgplayer-skin-default"
  />-->
</template>

<script>

import FlvJsPlayer from "xgplayer-flv.js"

export default {
  name: 'FlvVideo',
  props: {
    videoUrl: {
      required: true,
      default: ""
    },
    showTitle: {
      default: false
    },
    videoTitle: {
      default: ""
    },
    iconTitle: {
      default: ""
    },
    idIndex: {
      default: ""
    },
    poster: {
      default: ""
    },
    isFull: {
      default: () => false
    }
  },
  mounted() {
    console.log('isFull--:', this.isFull, this.videoUrl)
    // this.connect('mse-a', 'http://aihallapi-fcid-test6-8080.msxfcloud.test/av/live/110012');
    this.connect(`play-flv-${this.idIndex}`, this.videoUrl);
  },
  methods: {
    createPlayer(id, url) {
      console.log('poster:', this.poster)
      return new FlvJsPlayer({
        id: id,
        // loop: true,
        // poster: 'https://static.msxf.com/static/wwwboss/2021-09-10/A5B4B2087799249EB559E3EB7717FE30/%E7%94%A8%E6%88%B7.jpg',
        poster: this.poster || 'https://static.msxf.com/static/wwwboss/2021-09-10/A5B4B2087799249EB559E3EB7717FE30/%E7%94%A8%E6%88%B7.jpg',
        fluid: true,
        autoplay: true,
        autoplayMuted: true,
        isLive: true,
        playsinline: true,
       /* width: "100%",
        height: "360px",*/
        controls: true,
        videoInit: true,
        cors: true,
        url: url,
        flvOptionalConfig: {
          enableWorker: true,
          enableStashBuffer: false, //启用缓存
          stashInitialSize: 2048, //缓存大小2m
          lazyLoad: true,
          lazyLoadMaxDuration: 2 * 60,
          autoCleanupSourceBuffer: true,    //自动清除缓存
          autoCleanupMaxBackwardDuration: 35 * 60,
          autoCleanupMinBackwardDuration: 30 * 60,
          reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等
        }
      });
    },
    connect(id, url) {
      let player = this.createPlayer(id, url);
      console.log('----player-:', player, player.abort)
      this.player = player
      player.on('error', (e) => {
        console.log("get error: ", e);
        if (e.errorType != 'other' && e.errorType != 'network') {
          return;
        }
        this.reconnect(player, id, url);
      })
      // 播放完成
      player.on('ended', e => {
        console.log('----------ended-----------:', id, url)
        // this.reconnect(player, id, url);
        // player.src = url
        // player.start(url)
        // player.poster = require('@/assets/icon-secret.png')
        // player.reload()
        this.connect(id, url);
      })
      player.once('pause', () => {
        console.log('暂停播放:', id)
        // player.start(url)
      })
      player.once('canplaythrough', () => {
        console.log('可流畅播放:', id)
      })
      player.once('complete', () => {
        console.log('complete:', id)
      })

    },
    reconnect(player, id, url) {
      player.pause()
      player.destroy();
      console.log("断线重连");
      setTimeout(() => {
        try {
          this.connect(id, url);
        } catch (e) {
          console.log("断线重连失败, 重试:", e)
          this.reconnect(player, id, url);
        }
      }, 1000 * 10);
    }
  },
  beforeDestroy() {
    console.log('注销视频：', this.videoUrl, this.player)
    this.player && this.player.destroy()
  }
}
</script>

<style scoped lang="less">
  .video-flv-wrapper{position: relative;
    h3{font-size: 18px;color: #3799FF; line-height: 24px; margin-top: 28px;}
  }
</style>

测试直播流是否可以播放

<!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://ipc.farmkd.com:447/3nm4x0wdhtsas/31011500991320005400.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>