vue播放rtmp

VUE實現rtmp播放

1.npm 安裝插件

idea工具terminal中命令通過命令安裝插件，其他方式自行百度

npm install vue-video-player --save // 內置video.js
npm install videojs-flash --save //播放 RTMP 流，需要安裝 videojs-flash 插件

2.引入樣式及JS

考慮到其他組件會用到視頻播放，所以在main.js內配置

（1）videoJs的樣式

require('video.js/dist/video-js.css')

（2）vue-video-player的樣式

require('vue-video-player/src/custom-theme.css')

（3）把VueVideoPlayer導入並掛在到vue上

import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

3.具體業務模塊使用

（1）引入需要的文件（script標簽內）

import { videoPlayer } from 'vue-video-player'

import  'videojs-flash'

（2）組件代碼

<template>
  <div class="container">
    <div class="player">
      <video-player  class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="videoOptions">
      </video-player>
    </div>
  </div>
</template>

data() {
　　return {
　　　　videoOptions: {
　　　　　　height: '260',
　　　　　　sources: [{
　　　　　　　　type: 'rtmp/mp4',
　　　　　　　　src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
　　　　　　}],
　　　　　　techOrder: ['flash'],
　　　　　　muted: true, // 默認靜音
　　　　　　preload: 'auto', // 視頻預加載
　　　　　　autoplay: true,
　　　　　　controls: true,
　　　　　　notSupportedMessage: '此視頻暫無法播放，請稍后再試'
　　　　}
　　}
}

 

 

參考資料：

資料1：https://blog.csdn.net/xing_zlear/article/details/99640464

資料2：https://blog.csdn.net/qq_40963664/article/details/79883159