videojs 使用教程
@(視頻)
(videojs官網)[http://docs.videojs.com/]
新手入門使用
你的第一個demo：
<head>
<link href="http://vjs.zencdn.net/5.10.4/video-js.css" rel="stylesheet">
<!-- 如果要支持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" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<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>
<script src="http://vjs.zencdn.net/5.10.4/video.js"></script>
</body>
入門使用：
1 通過 html 的類名和 data-setup初始化 視頻播放器
- step1 引入videojs 的相關庫文件
<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
<script src="//example.com/path/to/video.min.js"></script>
<script>
<!--f指出lash 播放視頻的swf文件的路徑-->
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
- step2
使用 h5 播放視頻的是，你只需嵌入 video 標簽，videojs 會讓視頻在所有瀏覽器中兼容播放。
除了 vide 標簽，你還需要設置：- data-setup videojs 會根據data－setup中的json參數來初始化視頻播放器
- 每個video 標簽都應該id屬性，且 id 屬性在整個頁面中是唯一的
- class屬性
1)video-js類名字是必須的，因為videoj用這個類名做功能性操作，比如控制視頻播放器皮膚的樣式
2）默認皮膚：vjs-default-skin
2動態載入html 設置視頻播放器
//eleId的地方可以放置dom元素或者是 eleId 的選擇器
videojs('eleId',{
//像data-setup那樣設置的參數
},function(){
//視頻播放器初始化完畢，就會調用這個回調函數
}
Options參數
直接嵌入一個video標簽就可以構造一個videojs 的視頻播放器。videojs 在設置參數上做了一些操作，使得你能夠用h5 的video標准標簽屬性來設置初始化videojs播放器的初始化選項(options).
比如你這樣初始化視頻播放器選項：
<video controls autoplay preload="auto" ...>
就等價於：
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
（ 注意：data－setup是json的數據格式）
一些屬性：
- preload
auto: 立即加載視頻的文件（如果瀏覽器允許），在ios設備上，會阻止自動加載。
metadata：Load only the meta data of the video
none：等待用戶交互了才回加載視頻文件
常見的基礎API
//獲取到返回回來到視頻播放器
var videoPlayer = videojs('eleId',{},function(){
//手動設置視頻播放器的視頻源
player.src('')；
});
//播放與暫停播放
videoPlayer.play();
videoPlayer.pause();
//設置／獲取視頻的當前播放時間
videoPlayer.currentTime();
videoPlayer.currentTime(120);
//視頻總的時常
videoPlayer.duration();
//獲取或設置播放器的視頻源
videoPlayer.src();
videoPlayer.src('www.baidu.mp4')
//獲取或者設置視頻播放器的poster 圖片
videoPlayer.poster();
videoPlater.poster('xxx.jpg');
//
videojs的事件列表
durationchange
ended
error
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
timeupdate
volumechange
resize
綁定事件使用 on,比如
videoPlayer.on('play',function(){
});
視頻播放器皮膚調整
- 實現響應式播放
.video-js {
width: 80%;
margin: 0 auto;
}
.video-js .vjs-tech {
//這行代碼最為關鍵，這樣視頻播放器的外層容器都由視頻內容本身撐大
position: relative;
}
有時候，videojs 會默認生成 style標簽影響樣式，
可以使用下面的代碼來避免這個問題：
$('.vjs-styles-defaults').remove();
$('.vjs-styles-dimensions').remove();
這段js 代碼也能避免視頻黑框的問題
- 實現視頻播放按鈕，暫停播放按鈕和重播按鈕點顯示
-
居中顯示視頻播放器:給video標簽添加類名：video-js vjs-big-play-centered
-
關於視
- 視頻播放按鈕的樣式的調整
.video-js .vjs-big-play-button {
調整按鈕的大小，圓角率，
}
.video-js .vjs-big-play-button:before{
//調整播放按鈕中間的小三角型的大小
font-size值是寬度的一半最為合適
}
居中顯示視頻播放器按鈕的時候，調整樣式讓按鈕居中顯示
.vjs-big-play-centered .vjs-big-play-button ｛
｝
.video-js {
/*position: relative;*/
width: 80%;
margin: 0 auto;
}
.video-js .vjs-tech {
position: relative;
}
.video-js .vjs-big-play-button {
border-radius: 50%;
width: 8em;
height: 8em;
line-height: 8em;
font-size: 1em;
}
.video-js .vjs-big-play-button:before {
font-size: 4.5em;
}
// 視頻已經播放過了
.vjs-has-started .vjs-big-play-button {
/*display: block!important;*/
}
//視頻播放過程中
.vjs-playing .vjs-big-play-button {
display: none;
}
//視頻暫停播放
.vjs-paused .vjs-big-play-button {
display: block;
}
//視頻播放結束了
.vjs-ended .vjs-big-play-button {}
- 針對手機進行的樣式處理
隱藏視頻的播放按鈕：
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
默認隱藏掉原生的視頻播放按鈕會帶來一個問題：
在 ios 設備上，視頻要點擊vjs-big-play-button兩次才能播放視頻，目前sina網用的是原生的video標簽，騰訊和搜狐用的是自己的移動端視頻播放器。
在ipad上可以使用videojs作為視頻播放器，ipad 上視頻播放器的皮膚是奇效的。
整體度解決方案：
pc 和 tablet 設備，可以使用videojs作為視頻播放器，移動端可以使用原生的和videojs，當在移動端使用videojs 的時候，需要針對ios設備隱藏掉 big-play-button.來避免上述帶來的問題。