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

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();}

3、videoJS菜单界面二次开发

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

//播放器实例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获取DOMfunction get(index) {return document.getElementById(index);}//修改播放地址并播放function writeAddressAndPlay(index,url,type) {//播放器操作setsrc(index, url, type?type:"rtmp/flv");play(index);}//高清标清切换就是应用名加减HDfunction changeUrl(video) {var index = $(video).text();//获取当前播放的urlvar 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);}

同时还推荐一款国内的视频插件：ckplayer()