1.github地址
2.常用API:
class :
video-js: video-js應用視頻所需的風格。js功能,比如全屏和字幕。
vjs-default-skin: vjs-default-skin默認皮膚適用於HTML控件,並且可以刪除或覆蓋創建自己的控制設計
data-setup 設置常用屬性:
autoplay :是否自動播放
controls: 設置是否可以人為控制播放
preload：{ 設置預加載
auto： 立即加載(瀏覽器允許的情況下)
metadata:只加載視頻的基本信息
none:不加載，直到用戶點擊播放的時候
}
poster：設置未播放時候的快照
loop：控制是否循環播放
width
height
JS形式:
videojs("example_video_1", {}, function(){ // Player (this) is initialized and ready.
});
videojs中設置data-setup的兩種方式:
1.html:
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
2.js:
videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
track:
kind:定義字幕內容類型，只能是這五種之一: subtitles, captions, descriptions, chapters, metadata.
src:字幕文件的URL地址
srclang:字幕文件的語言類型，標識信息的作用，播放器不使用這個屬性。
label:字幕標簽，每個字幕元素必需設置一個唯一不重復的標簽，切換字幕時顯示的名稱。
default:指定是否是默認字幕。如果每個都不指定，將不會自動顯示字幕
例子:
<!DOCTYPE html>
<html>
<head>
<title>video.js</title>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"
poster="D:\CloudMusic\MV\jay.zhou.jpg" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'>
<!--MP4的數據源-->
<source src="D:\CloudMusic\MV\jay.zhou.mp4" type='video/mp4'>
<track kind="subtitles" label="Chinese subtitles" src="D:\CloudMusic\MV\st.vtt"
srclang="zh" label="Chinese">
</video>
<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
</body>
</html>
截圖:
