videojs怎么播放rtmp协议

JavaScript024

videojs怎么播放rtmp协议,第1张

1、创建videoJS播放器实例

(1)调用swf文件

<script type="text/javascript">videojs.options.flash.swf = "player/video-js.swf"</script>

(2)配置初始化参数

<!-- data-setup{}可以控制播放器的一些功能;autoplay:true/false,是否自动播放;preload:auto\none\meta,自动加载\不加载\加载元数据 -->

<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"

controls preload="auto" poster="img/eguidlogo.png" width="640" height="360"

data-setup='{ "html5" : { "nativeTextTracks" : false } }'>

<source src='rtmp://192.168.30.21/live/' type='rtmp/flv' />

</video>

如果播放的是普通视频,需要修改<source src='视频地址' type='video/mp4或者video/flv'/>

type里面放 ‘ video/视频格式 ’ 即可

(3)创建播放器实例

//播放器实例

var player = videojs('videoPlayer')

2、videoJS常用api:

/*

* 根据videoJS官方文档编写的播放器常用操作

*/

//获取当前类型

function getCurrentType(idnex) {

return idnex.currentType()

}

//获取当前播放地址

function getCurrentAddr(index) {

return index.currentSrc()

}

//获取当前播放时间

function getCurrentTime(index) {

return index.currentTime()

}

//获取当前网络状态

function networkState(index) {

return index.networkState()

}

//修改播放地址

function setsrc(index, url, type) {

index.src({

type : type,

src : url

})

}

//重载播放器

function reset(index) {

index.reset()

index.load()

}

//播放

function play(index) {

index.play()

}

//暂停

function pause(index) {

index.pause()

}

最近项目中接入 video.js 框架,在安卓机上 全屏 时, 有声音无画面

通过调试,发现在全屏后,video标签 width &height 均为0,

经过查看video.js官网文档,检查播放器实例配置,无误,Google各种方案无果。

果断放弃video自带的全屏方案。

通过修改video标签旋转,按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

但是问题又出现了,手机的20px的 状态条 仍旧在 =_=#

可以结合cordova插件 cordova-plugin-statusbar 插件实现。

【插件地址 传送门】

至此,曲线救国,问题修复。