vue-video-player 播放rtmp视频

vue-video-player 播放rtmp视频加粗样式

1. 网址：

https://www.npmjs.com/package/vue-video-player

2. 代码：

3. 可以播放rtmp视频流和hls视频流 采用的是flash进行播放 需要引入 import ‘videojs-flash’；

4. npm 下载vue-video-player的时候已全部下载下来 无需另外下载，cnpm下载的时候下载的包和npm的不一样，所以导致不能播放。

5. npm和cnpm下载的依赖有些时候会不一样，可能会导致项目初始化失败或者某个功能失败。

6. 代码
   

   import ‘video.js/dist/video-js.css’
   import {videoPlayer} from ‘vue-video-player’
   import ‘videojs-flash’
   export default {
   name: “rtmp”,
   data(){
   return{
   input:‘rtmp://live.hkstv.hk.lxdns.com/live/hks1’,
   playerOptions: {
   width:‘800’,
   height: ‘360’,
   sources: [{
   type: “rtmp/mp4”,
   src: “rtmp://202.69.69.180:443/webcast/bshdlive-pc”
   }],
   techOrder: [‘flash’],
   autoplay: false,
   controls: true
   }
   }
   },
   components: {
   videoPlayer
   },
   computed: {
   player() {
   console.log(“aaa”)
   return this.$refs.videoPlayer.player
   }
   },
   methods:{
   playerReadied:function () {
   console.log(‘playing!’, this.player);

       },
       onPlayerLoadeddata(player) {
         console.log('player Loadeddata!', this.player);
         this.player.play();
       },
       sure(){
         var that = this;
         that.player.src(that.input);
         that.player.play();
       }
     }
   }
   

如果使用video.js播放rtmp视频流 需要搭建本地服务器才能进行播放，也需要下载video.flash.js；
简单的写一个HTMLdemo会播放失败。