您的位置：首页 > 理论基础 > 计算机网络

Js网络视频播放器之VideoJs&&ckplayer（直播拉流rtmp、hls）

2017-11-16 11:14 633 查看

一、轻量级的开源播放器VideoJs&&Ckplayer

1、videoJS

对于HTML5支持非常棒，可以自动在flash和Html5播放器之间进行切换，videoJS可以兼容到IE8，它提供的界面非常简洁，需要对界面进行二次开发。

获取videoJs

2、ckPlayer

这个播放器是国产播放器，功能有很多，只简单介绍两个功能，（1）提供手动切换html5和flash功能（2）提供了关灯开灯功能。完全可以满足国内开发的需求（3）它内置了大量的广告位，比如片头广告，暂停广告，片尾广告，缓冲广告，切点广告，滚动文字广告，以及满足权限关闭广告的功能....秒懂国内看视频就是广告比较多。

获取ckplayer

二、videoJS播放器嵌入页面及api介绍

1、创建videoJS播放器实例

（1）调用swf文件

[html] view
plain copy

print ?

（2）配置初始化参数

[html] view
plain copy

print ?

<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）创建播放器实例

[html] view
plain copy

print ?

//播放器实例

var player = videojs('videoPlayer');

补充：videojs会根据浏览器自动切换flash和html5播放模式

2、videoJS常用api：

[html] view
plain copy

print ?

/*

* 根据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();

}

3、videoJS菜单界面二次开发

简单实现清晰度控制和创建清晰度菜单

[html] view
plain copy

print ?

//播放器实例

var player = videojs('videoPlayer');

//播放器初始化操作面板清晰度菜单

function playerInitVideo() {

$videoPanelMenu = $(".vjs-fullscreen-control");

$videoPanelMenu.before('<div class="vjs-subtitles-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true">'

+ '<div class="vjs-menu" role="presentation">'

+ '<ul class="vjs-menu-content" role="menu">'

+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeUrl(this)">高清</li>'

+ '<li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" onclick="changeUrl(this)">标清 </li>'

+ '</ul></div><span class="vjs-control-text">清晰度</span></div>');

}

//加载页面进行播放器初始化

player.ready(function() {

playerInitVideo();

//player.play();

//setsrc(player,"rtmp://192.168.30.21/live/test3","rtmp/flv");

});

//通过id获取DOM

function get(index) {

return document.getElementById(index);

}

//修改播放地址并播放

function writeAddressAndPlay(index,url,type) {

//播放器操作

setsrc(index, url, type?type:"rtmp/flv");

play(index);

}

//高清标清切换就是应用名加减HD

function changeUrl(video) {

var index = $(video).text();

//获取当前播放的url

var CurrentUrl = getCurrentAddr(player);

$(".vjs-menu-item").removeClass("vjs-selected");

$(video).addClass("vjs-selected");

if (index == "高清") {

if (CurrentUrl.indexOf("HD") == -1) {

CurrentUrl = CurrentUrl + "HD";

} else {

return;

}

} else {

if (CurrentUrl.indexOf("HD") != -1) {

CurrentUrl = CurrentUrl.replace("HD", "");

} else {

return;

}

}

//修改地址并播放

writeAddressAndPlay(player, CurrentUrl);

}

这只是一种方案，如果有更好的方案，可以采用其他方法。

我这里的两个实时流采用nginx流媒体服务器推送的两个实时流的方式（一个普清，一个高清），在命名方式上采用类似增减HD的方式控制，到这里就可以自由控制清晰度了

三、ckPlayer播放器嵌入页面

1、创建播放器实例

[html] view
plain copy

print ?

2、常用配置功能

参考ckplayer官网功能配置

3、常用API

[html] view
plain copy

print ?

四、测试

videoJs初次拉取rtmp流播放时会出现，必须改变显示区域才能显示视频的bug，目前尚不清楚为什么，同样在推流端网络较差，推流断断续续的时候，video偶尔也会出现这种黑屏问题，尚不清楚原因，videojs无法手动设置buffer大小（缓冲时间）详见https://github.com/videojs/video.js/issues/1725，相比ckplayer效果比较好，直播我推荐使用ckplayer。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航