Используйте метод rtmp vue-video-player для воспроизведения прямой трансляции в Vue

JavaScript

предисловие

После двухдневного метания, я сделал много ошибок, которые не исправил, поэтому написал статью, чтобы зафиксировать это, и спасибоvue-video-playeАвтор , предоставляет нам такой удобный код.
Кроме того, студентам рекомендуется взглянуть на исходный код vue-video-playe, который можно прочитать примерно за полчаса, что поможет лучше понять принцип работы vue-video-playe.

Установить

Установка должна быть установлена ​​с использованием npm Если вы не можете воспроизвести видео после попытки n методов или сообщается об ошибке во время работы, рекомендуется удалить node_modules, затем удалить следующие два в package.json, а затем установить его снова с помощью npm

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

HTML-раздел Vue

<template>
  <div class="m-box">
    <videoPlayer
      class="vjs-custom-skin videoPlayer"
      :options="playerOptions"
      @pause="onPlayerPause($event)"
      ref="videoPlayer"
    ></videoPlayer>
    <div @click="showVideo" class="btn">2323</div>
  </div>
</template>

Vue JS часть

  • Я не использовал его стиль, поэтому я прокомментировал
  • Эта часть js также поддерживает переключение источников видео, аналогично эффекту смены каналов, но я нашел только этот источник видео, и нет возможности продемонстрировать
  • Используйте Chrome, чтобы разрешить Flash
  • В текущем видеопотоке есть карты, нужно подождать около 10 секунд
<script>
// import "vue-video-player/src/custom-theme.css"; // 引入样式
// import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";   // 如果使用全局引入 这句话可以不写，
import "videojs-flash";  // 如果使用全局引入 这句话可以不写，
export default {
  components: {
    videoPlayer,   // 如果使用全局引入 这句话可以不写，
  },

  // rtmp://58.200.131.2:1935/livetv/hunantv
  data() {
    return {
      playerOptions: {
        height: "300",
        width: "600",
        sources: [
          {
            type: "rtmp/mp4",
            src: "rtmp://58.200.131.2:1935/livetv/hunantv",
          },
        ],
        techOrder: ["flash"],
        autoplay: true,
        controls: true,
      },
    };
  },
  methods: {
    showVideo() {
      let myPlayer = this.$refs.videoPlayer.player;

      // 用于多个视频源直接切换，但是现在只有一个视频源，
      myPlayer.src("rtmp://58.200.131.2:1935/livetv/hunantv");
    },

    onPlayerPause(player) {
      console.log(player);
    },
  },
};
</script>

Метод глобального импорта

Примечание. В этом методе используется файл swf, который решает проблему, заключающуюся в том, что файл swf не может быть загружен из-за проблем с сетью и не может быть воспроизведен.


import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import 'videojs-contrib-hls/dist/videojs-contrib-hls'

videojs.options.flash.swf = "./video-js.swf";
Vue.use(VueVideoPlayer)

css-раздел

<style>
.m-box {
  width: 600px;
}
</style>

текущий результат

конец

Приведенный выше код — это весь код, который можно запустить напрямую и использовать rtmp для реализации воспроизведения в реальном времени.

Пополнить

Код может не совпадать с тем, что в статье, я написал весь код работающей версии, основанной на vue-cli3.0.
Самородки не могут загрузить сжатый пакет, я загрузил его прямо на github.
гитхаб-адрес

Категории