video.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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://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>
截图:
以上是关于video.js的主要内容，如果未能解决你的问题，请参考以下文章