videoJS播放器嵌入頁面及api介紹

1、建立videoJS播放器例項

（1）呼叫swf檔案

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

	<!-- 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()