video.js播放rtmp流2

<template>

<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>

</template>

<style>

.videoBox{

position: fixed;

top: 0px;

width: 100%;

height: 100%;

border: 1px solid red;

z-index: 99999;

}

</style>

<script>

export default {

data() {

return {

initialized: false,

currentTech: '',

playerOptions: {

overNative: true,

autoplay: true,//自动播放

controls: true,//进度条

loop: true,//是否循环

// fluid: true,//按流 体大小自适应

notSupportedMessage: '此视频暂无法播放，请查看是否安装flash',//无法播放时显示的信息

flash: {

/* swf: '../../static/common/flowplayer/playerProductInstall.swf',

mp4:'../../static/common/flowplayer/playerProductInstall.swf' */

// swf:'../../static/common/flowplayer/playerProductInstall.swf',

mp4:'../../static/common/video-js.swf'

},

techOrder: ['flash', 'html5'],// 兼容顺序

sources: [// 流配置，数组形式，会根据兼容顺序自动切换

{

type: 'rtmp/mp4',

src: 'rtmp://124.239.196.167/vod/&mp4:classroom/10050457620181029095550c.mp4'

// 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>