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