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

上一篇:Nginx 推流 拉流 --- 点播直播


下一篇:EasyCVR通过Ehome接入设备获取快照出现崩溃无法访问的优化