vue 播放rtmp格式的视频
安装环境:vue 2.5.16videojs-flash: 2.1.0,vue-video-player: 4.0.6浏览器环境: 必须允许flash 播放main.js 引入:import VueVideoPlayer from ‘vue-video-player’import ‘video.js/dist/video-js.css’//样式import...
·
安装环境:vue 2.5.16 videojs-flash: 2.1.0, vue-video-player: 4.0.6
浏览器环境: 必须允许flash 播放
main.js 引入:
import VueVideoPlayer from ‘vue-video-player’
import ‘video.js/dist/video-js.css’ //样式
import ‘vue-video-player/src/custom-theme.css’ //样式
import ‘videojs-flash’
Vue.use(VueVideoPlayer)
组件中使用:
<div class="videoBox" :style="{width:videowidth,height:videoheight}">
<video-player class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
@ready="onPlayerReadied"
@timeupdate="onTimeupdate"
>
</video-player>
</div>
<script>
export default {
name: 'RtmpVideo',
data() {
return {
initialized: false,
currentTech: '',
playerOptions: {
overNative: true,
autoplay: true,//自动播放
controls: true,//进度条
loop: true,//是否循环
// fluid: true,//按流 体大小自适应
notSupportedMessage: '此视频暂无法播放,请查看是否安装flash',//无法播放时显示的信息
flash: {
swf: '../../../static/VideoJS.swf'
},
techOrder: ['flash', 'html5'],// 兼容顺序
sources: [// 流配置,数组形式,会根据兼容顺序自动切换
{
type: 'rtmp/mp4',
src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
// src:"rtmp://live.hkstv.hk.lxdns.com/live//hks"
// src:"rtmp://10.5.0.143:1935/render/A32E1B9AE8BE4F6083702F9B41DD2030"
},
],
// poster: '../../../static/img/map.jpg', //静止时的画面
controlBar: {
timeDivider: false, // 时间分割线
durationDisplay: false, // 总时间
progressControl: true, // 进度条
customControlSpacer: true, // 未知
fullscreenToggle: true // 全屏
},
}
}
},
props:["videowidth","videoheight"],
mounted: function () {
//监测浏览器是否安装了flash播放器
this.isflashFn();
},
methods: {
onPlayerReadied() {
if (!this.initialized) {
this.initialized = true
}
this.$refs.videoPlayer.player.width_ = 500
},
// record current time
onTimeupdate(e) {
// console.log('currentTime', e.cache_.currentTime)
},
}
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)