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