video.js应用

调用video.js的样式和js文件

<link href="video-js.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="video.js"></script>

页面调用

<video src="index.mp4">
    <source type="video/mp4">
</video>
<script>
    videojs.options.flash.mp4 = "index.mp4";
    var player = videojs("example_video_1", {
        plugins : { PowerOff : {} }
    }, function(){
        // TODO
    });
</script>

主题配置

播放按钮默认是在左上角,官方说这样可以不会遮挡内容的精彩部分,但是如果我们想要放到中间,处理也很简单。在video标签中增加一个vjs-big-play-centered样式就好了。

<video id="video1" class="video-js" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
    <source id="sourceBox" src="http://static.qiakr.com/movie/0060202.mp4" type='video/mp4'>
    <p class="vjs-no-js">不支持播放</p>
</video>

自动播放

<video autoplay ...>

或者

{ "autoplay": true }

预加载资源

<video preload ...>

或者

{ "preload": "auto" }

视频缩略图

<video poster="myPoster.jpg" ...>

或者

{ "poster": "myPoster.jpg" }

自动循环

<video loop ...>

或者

{ "loop": "true" }

设置宽高

<video width="640" height="480" ...>

或者

{ "width": 640,"height":480 }

功能组件树

//移除静音按钮
var player = videojs(‘video-id‘, {
    controlBar: {
        muteToggle: false
    }
});

videojs 有许多的组件,比如声音,播放按钮,字幕,时间,进度条等等,它们在html中的结构类似于这样子:

Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle

METHODS

autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

EVENTS

durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

发表评论