VideoJs网页播放视频
包含内容: 源码,全套工具
作者QQ549710689
下载Demo
1. 初始化
videojs("example_video_1", {}, function(){
//video.js初始化完成后执行
});
2.video标签的class中的"video-js" 是videojs全屏和字幕等功能需要的基础类,vjs-default-skin是vidojs界面默认的皮肤，
vjs-big-play-centered是播放按钮居中，而默认的是在左上角的。
参数设置
1，autoplay：
该属性使video会在页面加载完毕后立即播放，而IOS设备屏蔽了这个属性。
2，preload：
autoplay属性会屏蔽掉preload属性，没有autoplay属性时，
当preload值为auto时，页面加载时即加载媒体，但是苹果移动设备会忽略该属性以保护带宽
当preload值为metadata时，只加载一些关于视频的元数据信息，如持续时间，媒体尺寸等等。
3，"poster": "./img/tian.gif", 视频播放之前的图 就像海报类似的
方法：
1.play() 视频播放
2.pause() 视频暂停
3.ended() 视频播放结束
4.player.currentTime() //player 是播放器 currentTime 是获取当前的播放时间
5.player.duration() 视频结束的时候 duration获取视频的持续时间 也就是 视频总的时间
6.player.bufferedPercent() 视频缓存百分比 切记是百分比呦
插件机制：
1，声明插件函数 function Fun(option){}
2，注册为一个插件 videojs.plugin('Fun',Fun)
3, 使用插件
动态创建的video在初始化videojs时调用插件，即videojs('id',{plugins:{Fun:option}})
非动态创建的video初始化了的videojs对象可以直接调用，即videojs.Fun(option)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.8</title>
<link href="css/video-js.css" rel="stylesheet">
<style>
.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
poster="poster.jpg" data-setup="{}">
<source src=" A8%E6%95%99%E5%AD%A6.mp4" type="video/mp4">
<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="js/video.min.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
//myPlayer.play();
});
</script>
</div>
</body>
</html>