video.js

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:CloudMusicMVjay.zhou.jpg" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'>
    <!--MP4的数据源-->
    <source src="D:CloudMusicMVjay.zhou.mp4" type='video/mp4'>
    
    <track kind="subtitles" label="Chinese subtitles" src="D:CloudMusicMVst.vtt"
   srclang="zh" label="Chinese">
    
  </video>

  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>

</body>
</html>


截图: