博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
video.js播放rtmp流2
阅读量:6679 次
发布时间:2019-06-25

本文共 1813 字,大约阅读时间需要 6 分钟。

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

转载于:https://www.cnblogs.com/liuliang389897172/p/10493781.html

你可能感兴趣的文章
hdu 4770(枚举 + dfs爆搜)
查看>>
iPhone 6 首发无大陆,DevStore要去香港吗?
查看>>
理解class.forName()
查看>>
web系统架构的演进变化很形象
查看>>
Linux curses库使用
查看>>
第42周三
查看>>
一致性hash和solr千万级数据分布式搜索引擎中的应用
查看>>
Python数据结构与算法--算法分析
查看>>
IT职场求生法则(转)
查看>>
Load Average
查看>>
Oracle----Operator
查看>>
反编译工具 jad
查看>>
【MyBean调试笔记】接口的使用和清理
查看>>
iOS开发手记-iOS8中使用定位服务解决方案
查看>>
应用程序框架实战十三:DDD分层架构之我见
查看>>
finally块的问题(finally block does not complete normally) (转)
查看>>
转 【O2O案例】汽车后市场垂直化电子商务:平业模式解析
查看>>
OpenCV Show Image cvShowImage() 使用方法
查看>>
云岸数字
查看>>
wordpress在Linux nginx下权限设置
查看>>