首页 > 代码库 > video.js
video.js
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://www.mamicode.com/"http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet"> <!-- If you‘d like to support IE8 --> <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"D:\CloudMusic\MV\jay.zhou.mp4" type=‘video/mp4‘> <track kind="subtitles" label="Chinese subtitles" src=http://www.mamicode.com/"D:\CloudMusic\MV\st.vtt" srclang="zh" label="Chinese"> </video> <script src=http://www.mamicode.com/"http://vjs.zencdn.net/5.8.8/video.js"></script></body></html>
截图:
video.js