博客

1、安装vue-video-player与videojs-flash

npm install vue-video-player --save-dev
npm install videojs-flash --save-dev

2、在main.js中引入

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' // 引入样式
import 'vue-video-player/src/custom-theme.css' // 引入样式
import 'videojs-flash'
Vue.use(VueVideoPlayer)

3、组件中使用

<template>
	<div>
		<videoPlayer
      ref="videoPlayer"
      style="height: 350px"
      @timeupdate="onPlayerTimeupdate($event)"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      class="vjs-custom-skin videoPlayer"
      :options="playerOptions"
    ></videoPlayer>
	</div>
</template>
<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {}
    };
  },
  methods: {
    // 视频结束的时候
    onPlayerEnded(player) {
      console.log("ended");
      console.log(player.currentTime());
    },
    // 加载数据
    onPlayerLoadeddata(player) {
      // 直播每次播放都会调用--录播只是刚开始调用一次
      console.log("loadeddata");
      console.log(player.currentTime());
    },
    onPlayerCanplaythrough(player) {
      // 在不停下来进行缓冲的情况下--每次拖拽的时候都会缓冲
      console.log("canplaythrough");
      console.log(player.currentTime());
    },
    onPlayerPlay(player) {
      console.log("播放", player.currentTime());
    },
    onPlayerTimeupdate(player) {
      // console.log("当前视频秒数", player.currentTime());
    },
    onPlayerPause(player) {
      console.log("暂停", player.currentTime());
    },
    // 时间格式 2019-04-02
    formatDate() {
      var date = new Date();
      const year = date.getFullYear();
      const month = this.timeFormat(date.getMonth() + 1);
      const day = this.timeFormat(date.getDate());
      const hour = this.timeFormat(date.getHours());
      const minute = this.timeFormat(date.getMinutes());
      const second = this.timeFormat(date.getSeconds());
      const allDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      return allDate;
    },
    // 倒计时小于10
    timeFormat(param) {
      //小于10的格式化函数
      return param < 10 ? "0" + param : param;
    }
  },
  mounted() {
    // 这里可以设置src
    var src = "rtmp://60.10.57.51:19020/live/camera1"; // 跳转页面接收参数
    this.playerOptions = {
      height:"450",
      sources: [
        {
          type: "rtmp/flv", // 直播视频流 直播只有暂停和播放事件
          src: src
        },
        // {
        //   type: "video/mp4",  // MP4
        //   src: "https://images.nnyun.net/lvEh8zLaKkJla-zndPHaHB1KMBUC"
        // }
      ],
      techOrder: ["flash"],
      autoplay: false,
      controls: true
    };
    console.log("this is current player instance object", this.player);
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  }
};
</script>

这样就能实现rtmp直播流在浏览器中播放，但有以下几点切记，不要入坑

  1.安装vue-video-player插件一定要用npm安装，不可使用cnpm安装，否则会报:“The "flash" tech is undefined. Skipped browser support check for that tech”
    2.如果需要播放 RTMP 流，需要安装 videojs-flash 插件
    3.如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
    4.如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS
    5.如果你需要在谷歌浏览器播放，需要将谷歌浏览器的flash设置改成允许使用flash插件播放