在开发的项目中，有视频播放这个功能，找了好多前端的插件，最后决定时用video.js 。
什么是video.js？
video.js是一个开源的HTML5 jquery 视频插件，这个插件可以用来处理Flash 视频，也可以很好的支持H5，它还是一个多平台支持的产品。
video.js的优点
- 它是开源免费的，可以在github很容易的获取到最新的源码。
- 使用起来非常容易，只要花几秒中就可以夹起一个视频播放页面。
- 它几乎兼容所有的浏览器，并且优先使用HTML5，在不支持的浏览器中，会自动生成Falsh进行播放。
- 纯js和css打造，使用最广泛的前端视频播放插件，说明文档详细，学习起来比较容易。
话不多说，代码里面的注释都很全，video.js中的api我也是了解的不是很多，在以后的具体项目中再学习记录。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video.js 学习2017-7-28</title> <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> --> <link href="css/video-js.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script> <!-- 如果要支持 IE8 --> <!-- <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> --> <style media="screen"> .video-div{ width: 400px; height: 200px; margin: 80px auto; } .video-js .vjs-tech { /*这行代码最为关键，这样视频播放器的外层容器都由视频内容本身撑大*/ position: relative; } /* 设置暂停时中间的显示的播放按钮！ */ vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; } /* 设置video 圆角 */ #myVideo1{ border-radius: 10px; } /* 设置播放按钮，矩形变 圆形 */ .video-js .vjs-big-play-button{ font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: #73859f; background-color: rgba(115,133,159,.5); border-width: 0.15em; margin-top: -1.25em; margin-left: -1.75em; /* 中间的播放箭头 */ .vjs-big-play-button .vjs-icon-placeholder { font-size: 1.63em; } /* 加载圆圈 */ .vjs-loading-spinner { font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em; } /**/ .vjs-has-started .vjs-control-bar{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } </style> </head> <body> <div> 我是文字 </div> <div class="video-div"> <!-- controls 设置或返回视频应该显示的控件，比如：暂停、播放 html5的新特性 --> <!-- preload 是否在页面加载后再入视频 html5新特性 preload="auto" 当页面加载后载入整个视频 preload="meta" 当页面加载后载入元数据 preload="none" 当页面加载后不载入视频 --> <!-- poster 视频加载时显示的图像，或者在用户点击播放之前显示的图片 如果未设置，使用视频的第一帧来代替 html5新特性 poster="URL"; --> <!-- 必须项 data-setup: 是json的数据格式,页面准备完成时自动加载，如果要强制在pc端使用 flash播放， 则有两种途径：1.通过 html的 data-setup='{ "techOrder":["flash", "html5"] }' 2.通过js video("myVideo1",{"techOrder":["flash", "html5"]},function(){ // 第一个参数：video的id 二. 设置当前data-setup属性，也可以为 {}, 三. 执行的方法 }) --> <!-- class说明： video-js 应用所需的 Video.js 功能，如全屏和字幕样式。 必须项 vjs-default-skin 为 HMTL 控制条应用默认的皮肤，可以被移除或重写，以创建你自己的控制条样式。 --> <!-- source 标签为媒介元素（video、audio）定义媒介资源 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 属性： src ：规定媒介文件的URl type：规定媒体资源的 MIME 类型。 preload="meta" --> <video id="myVideo1" controls preload="auto" data-setup="{}" poster="00.jpg" class="video-js vjs-default-skin vjs-big-play-centered" width="400" height="200"> <!-- 没有设置长和高 默认 1920 * 1080 --> <!-- source 默认加载 一个文件资源 --> <source src="1.mp4" type="video/webm"> <source src="2.mp4" type="video/mp4"> <!-- <source src="1.webm" type="video/webm"> <source src="1.ogv" type='video/ogg' /> --> </video> </div> <div> 参看文献 <a href="http://www.awaimai.com/2053.html"></a> <a href="http://blog.csdn.net/ly115176236/article/details/50977127"></a> <a href="http://blog.csdn.net/huang100qi/article/details/53405876"></a> <a href="http://www.cnblogs.com/ShaYeBlog/p/7068188.html"></a> <a href="http://www.cnblogs.com/alicePanZ/articles/5676915.html"></a> <a href="http://www.cnblogs.com/xinlinux/p/4365188.html"></a> <a href="http://www.awaimai.com/2053.html"></a> <a href="http://www.cnblogs.com/afrog/p/6689179.html"></a> </div> <div> <p> 常用api </p> //播放与暂停播放 myPlayer.play(); myPlayer.pause(); //设置/获取视频的当前播放时间 myPlayer.currentTime(); myPlayer.currentTime(120); //视频总的时常 myPlayer.duration(); //获取或设置播放器的视频源 myPlayer.src(); myPlayer.src('www.baidu.mp4') //获取或者设置视频播放器的poster 图片 myPlayer.poster(); myPlayer.poster('xxx.jpg'); </div> </body> <!-- 设置Falsh播放器的路径，如果浏览器不支持H5，将会使用Falsh： --> <script type="text/javascript"> videojs.options.flash.swf = "static/video-js/video-js.swf"; </script> <script> // 初始化所有的video 标签 var videos = document.getElementsByTagName('video'); for(i=0; i<videos.length; i++) { var video = videos[i]; if(video.className.indexOf('video-js') > -1) { videojs(video.id).ready(function(){ }); } } // 获取视频播放器 var myPlayer = videojs("myVideo1",{ "controls": true, "autoplay": false, "preload": "auto", "loop": false, controlBar: { // captionsButton: false,//用于切换和选择字幕的按钮组件 chaptersButton: false,//导航与其他语言的其他轨道 playbackRateMenuButton: true, //用于控制播放速率的组件 LiveDisplay: true, //显示实时指示器 subtitlesButton: false, //用于切换和选择字幕的按钮组件 remainingTimeDisplay: true,//显示视频中剩余的时间 progressControl: false, // 禁止出现进度条 //竖着的音量条 // volumeMenuButton: { // inline: false, // vertical: true // }, fullscreenToggle: true //切换全屏视频 }, mydata: { username: 'xiaoming' } },function(){ myPlayer.pause(); // 暂停 }) // 用js设置资源文件 // var myPlayer = videojs('my-player', { // sources: [{ // src: '//path/to/video.mp4', // type: 'video/mp4' // }, { // src: '//path/to/video.webm', // type: 'video/webm' // }] // }); // videojs("myVideo1").ready(function(){ // var myPlayer = this; // //myPlayer.play(); // 播放 // myPlayer.pause(); // 暂停 // var whereYouAt = myPlayer.currentTime(); // console.log(whereYouAt); // }); // 事件关注 myPlayer.on("play",function(){ console.log("a"); var a = myPlayer.currentTime(); console.log(a); // 我是开始播放时的事件 }); myPlayer.on("pause",function(){ // 我是暂停时的事件 }) myPlayer.on("ended",function(){ // 我是结束播放时的事件 }); </script> </html>