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"  οnclick="changeUrl(this)">高清</li>'
						+ '<li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox"  οnclick="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);
	}
	

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