1，使用前準備。先移步官網對插件進行大致的瞭解，以判斷是否滿足需求的需要，官網中的demo相當實用。在下就是官網，
2，正式開始，首先引入相關的文件
<link rel="stylesheet" href="../css/video/video-js.min.css" />
<script src="../js/common/jquery-2.1.4.js"></script>
<script src="../js/video/video.min.js"></script>
3.HTML代碼部分
<!-- 官網demo中可以使用的一些情況 -->
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
poster="m.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
</video>
<!-- 本人實際使用的代碼 -->
<div class="content-right-top" id="video_play">
<video id="my-video" class="video-js " controls preload="auto" data-setup="{}">
</video>
</div>
3，JS代碼部分
（1）首先定義相關屬性，根據自己的需求進行取捨。
//設置中文
videojs.addLanguage('zh-CN', {
"Play" : "播放",
"Pause" : "暫停",
"Current Time" : "當前時間",
"Duration" : "時長",
"Remaining Time" : "剩餘時間",
"Stream Type" : "媒體流類型",
"LIVE" : "直播",
"Loaded" : "加載完畢",
"Progress" : "進度",
"Fullscreen" : "全屏",
"Non-Fullscreen" : "退出全屏",
"Mute" : "靜音",
"Unmute" : "取消靜音",
"Playback Rate" : "播放速度",
"Subtitles" : "字幕",
"subtitles off" : "關閉字幕",
"Captions" : "內嵌字幕",
"captions off" : "關閉內嵌字幕",
"Chapters" : "節目段落",
"Close Modal Dialog" : "關閉彈窗",
"Descriptions" : "描述",
"descriptions off" : "關閉描述",
"Audio Track" : "音軌",
"You aborted the media playback" : "視頻播放被終止",
"A network error caused the media download to fail part-way." : "網絡錯誤導致視頻下載中途失敗。",
"The media could not be loaded, either because the server or network failed or because the format is not supported." : "視頻因格式不支持或者服務器或網絡的問題無法加載。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support." : "由於視頻文件損壞或是該視頻使用了你的瀏覽器不支持的功能，播放終止。",
"No compatible source was found for this media." : "無法找到此視頻兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it." : "視頻已加密，無法解密。",
"Play Video" : "播放視頻",
"Close" : "關閉",
"Modal Window" : "彈窗",
"This is a modal window" : "這是一個彈窗",
"This modal can be closed by pressing the Escape key or activating the close button." : "可以按ESC按鍵或啓用關閉按鈕來關閉此彈窗。",
", opens captions settings dialog" : ", 開啓標題設置彈窗",
", opens subtitles settings dialog" : ", 開啓字幕設置彈窗",
", opens descriptions settings dialog" : ", 開啓描述設置彈窗",
", selected" : ", 選擇",
"captions settings" : "字幕設定",
"Audio Player" : "音頻播放器",
"Video Player" : "視頻播放器",
"Replay" : "重播",
"Progress Bar" : "進度小節",
"Volume Level" : "音量",
"subtitles settings" : "字幕設定",
"descriptions settings" : "描述設定",
"Text" : "文字",
"White" : "白",
"Black" : "黑",
"Red" : "紅",
"Green" : "綠",
"Blue" : "藍",
"Yellow" : "黃",
"Magenta" : "紫紅",
"Cyan" : "青",
"Background" : "背景",
"Window" : "視窗",
"Transparent" : "透明",
"Semi-Transparent" : "半透明",
"Opaque" : "不透明",
"Font Size" : "字體尺寸",
"Text Edge Style" : "字體邊緣樣式",
"None" : "無",
"Raised" : "浮雕",
"Depressed" : "壓低",
"Uniform" : "均勻",
"Dropshadow" : "下陰影",
"Font Family" : "字體庫",
"Proportional Sans-Serif" : "比例無細體",
"Monospace Sans-Serif" : "單間隔無細體",
"Proportional Serif" : "比例細體",
"Monospace Serif" : "單間隔細體",
"Casual" : "舒適",
"Script" : "手寫體",
"Small Caps" : "小型大寫字體",
"Reset" : "重啓",
"restore all settings to the default values" : "恢復全部設定至預設值",
"Done" : "完成",
"Caption Settings Dialog" : "字幕設定視窗",
"Beginning of dialog window. Escape will cancel and close the window." : "開始對話視窗。離開會取消及關閉視窗",
"End of dialog window." : "結束對話視窗"
});
（2）數據獲取部分
var test = {
/**
* 查詢相關數據
*/
queryVideo : function() {
$.ajax({
type : "post",
dataType : "json",
url : url,
async : false,
success : function(result) {
if (result && result.list) {
var str = "";// 左側列表
var content = "";// 右側內容
var videoplay = "";// 視頻內容
var firstVideoCourse, firstPath = "";
$.each(result.list, function(i, h) { //獲取第一個視頻
if(i == 0){
firstVideoCourse = h.videoCourse;
firstPath = h.id;
}
str += '<a onclick="helpCourse.createVideo(\'' + h.videoCourse + '\')" class="item" data-tab="' + h.id + '">' + h.courseTitle + '</a>';
content += '<div class="ui bottom attached tab segment" data-tab="' + h.id + '" >' + h.textCourse + '</div>';
});
$("#attached_menu").html(str);
$("#help_content").html(content);
$('.menu .item').tab("change tab", firstPath);
helpCourse.createVideo(firstVideoCourse);
}
},
error : function() {
}
});
},
createVideo : function(videoCourse) {
$(".suchcaserightcontent").scrollTop(0);
// 銷燬上一次的視頻播放
videojs("my-video").ready(function() {
var myPlayer = this;
myPlayer.dispose();
});
$("#video_play").empty();
var videoplay = "";
videoplay += '<video id="my-video" class="video-js" controls poster="../images/helpVideoDefault.png">';
videoplay += '<source id="videoSrc" src="/userfiles/1/video/' + videoCourse + '.mp4" type="video/mp4"></video>';
$("#video_play").html(videoplay);
$(".vjs-has-started").css("display", "block");
$(".vjs-big-play-button").css("display", "block");
videojs('my-video').ready(function() {
var myPlayer = this;
});
}
}