vue使用vue-video-player播放rtmp流进行直播
1. 参考:https://www.npmjs.com/package/vue-video-playerhttps://github.com/surmon-china/vue-video-player/tree/master/exampleshttps://surmon-china.github.io/vue-video-player/2. 安装:npm install vue...
·
1. 参考:
https://www.npmjs.com/package/vue-video-player
https://github.com/surmon-china/vue-video-player/tree/master/examples
https://surmon-china.github.io/vue-video-player/
2. 安装:
npm install vue-video-player --save
npm install --save videojs-flash
3. 在main.js中配置:
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VueVideoPlayer)
4. 在项目使用:
<template>
<div>
<videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
export default {
components: {
videoPlayer
},
data () {
return {
playerOptions: {
height: '300',
sources: [{
type: 'rtmp/mp4',
src: '' //rtmp流地址
}],
techOrder: ['flash'],
autoplay: false,
controls: true,
poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg'
}
}
}
}
</script>
5. npm install --save videojs-flash 执行过程中可能会报错
错误一:
执行:npm install webpack-cli
错误二:
执行:npm install webpack-dev-server@2.x --save-dev
更多推荐
已为社区贡献6条内容
所有评论(0)