preface

I made a lot of mistakes in two days, so I wrote an article to record them. In addition, I would like to thank the author of VUe-video-playe for providing us with such convenient code. In addition, I suggest that you take a look at the vuE-video-Playe source code, which can be finished in about half an hour, so as to better understand the principle of VUe-Video-Playe

The installation

If you try n methods and the video doesn’t play, or you get an error during the runtime, it is recommended to remove node_modules, then remove the following two from package.json, and then reinstall using NPM

npm install vue-video-player –save-dev

npm install videojs-flash –save-dev

Vue HTML part

<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>
Copy the code

Vue JS part

  • I didn’t use its style, so I commented it out
  • This part of JS also supports switching video source, similar to the effect of changing channel, but I only found this one video source, so I can’t show it
  • Use Chrome to allow Flash
  • There are some jams in the current video stream, so you need to wait about 10 seconds
<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, / / if you use the global introduced this sentence can not write,}, / / 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 "], the autoplay: true, controls: true,,}}; }, methods: { showVideo() { let myPlayer = this.$refs.videoPlayer.player; / / for multiple video source switch directly, but now there is only one video source, myPlayer. SRC (" RTMP: / / 58.200.131.2:1935 / livetv/hunantv "); }, onPlayerPause(player) { console.log(player); ,}}}; </script>Copy the code

Global introduction mode

Note: this method introduces SWF file, which solves the problem that SWF cannot be played due to network problems.


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)
Copy the code

The CSS part

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

Running effect

The end of the

The above code can be run directly, using RTMP to achieve real-time playback of all the code

supplement

The code may not be quite the same as the article, I take out the time to write the runnable version of all the code, based on VUE-CLI3.0. The Nuggets couldn’t upload the package, so I just uploaded it to Github