播放flv格式的视频

播放flv格式的视频

应用技术

vue2 + flv-extend 0.1.0

前置操作

1、安装 flv-extend 0.1.0
npm install flv-extend 0.1.0

2、引入静态文件

把静态文件文件放入public文件夹下

在index.html中引入

	<script src="<%= BASE_URL %>videojs/jquery-1.12.4.min.js"></script>
    <link href="<%= BASE_URL %>videojs/video-js.css" rel="stylesheet" />
    <script src="<%= BASE_URL %>videojs/video.min.js"></script>
    <script src="<%= BASE_URL %>videojs/flv.js"></script>
    <script src="<%= BASE_URL %>videojs/videojs-flvjs.min.js"></script>

3、在vue文件中播放flv视频

<template>
  <div class="wrap">
    <div class="video-div" id="videoName">
    </div>
  </div>
</template>

<script>
import FlvExtend from "flv-extend";
export default {
  data() {
    return {
      flvUrl: "",  // flv格式视频地址
      player: "",
      isWaiting: true,
      flvPlayer: null,
    };
  },
  mounted() {
      this.startVideo()
  },
  methods: {
    startVideo() {
      var _this = this;
      var flvUrl = _this.flvUrl;
      $(`#videoName`).html("");
      $("#videoName").append(
        '<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" ></video>'
      );
      if (!flvUrl) {
        _this.$Message.info("视频地址不存在，请检查后重新播放");
        return;
      }
       const videoElement = document.getElementById(`example_video_1`);
       // 配置需要的功能
      const flv = new FlvExtend({
        element: videoElement, // *必传
        frameTracking: true, // 开启追帧设置
        updateOnStart: true, // 点击播放后更新视频
        updateOnFocus: true, // 获得焦点后更新视频
        reconnect: true, // 开启断流重连
        reconnectInterval: 0 // 断流重连间隔
      });
      // 调用 init 方法初始化视频
      // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
      _this.player = flv.init(
        {
          type: "flv",
          url: flvUrl,
          isLive: true,
          hasAudio: false
        },
        {
          enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
          autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
          stashInitialSize: 128 // 减少首帧显示等待时长
        }
      );
      // 直接调用play即可播放
      _this.player.play();
      _this.player.onstats = e => {
        if (e.speed == 0) {
          _this.isWaiting = true;
        } else if (e.speed > 0) {
          _this.isWaiting = false;
        }
      };

      _this.player.onerror = e => {
        _this.player.rebuild();
      };
    }
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 650px;
  height: 377px;

  .video-div,
  #videoName {
    width: 630px;
    height: 357px;
    margin-left: 10px;
    position: relative;
  }
/deep/ .video-js {
  height: 100%;
  width: 100%;
}
}
</style>

到这代码就结束啦，可以预览效果啦