减小字体
增大字体- ·上一篇文章：js生成随机颜色-randomColor.js
- ·下一篇文章：2016年最全的移动WEB前端UI框架
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
网页视频播放器video.js
-->
video.js是一个集成HTML5和Flash的开源网页视频播放器，video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash播放器。目前有超过200000多的网站正在使用vedio.js，作为网页视频播放器。video.js可以很好的解决浏览器的视频播放器样式的兼容性。
1 2 3 4 5 6 | //如果支持ie8，请引入videojs-ie8.min.js。Video.js 5.0是基于ES5, 但是ie8支持ES3。 <script src=“//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js”></script>//引入vedio.js和样式<script src=”/path/video.min.js”></script> <script> //配置本地的video-js.swf路径 videojs.options.flash.swf = “/path/video-js.swf”； </script> |
HTML代码
默认的按钮在右上角，vjs-big-play-centered类可以设置为居中。poster：设置封面图片。最好设置MP4、webm、ogg三种格式，这样大部分浏览器都支持了。
1 2 3 4 5 6 | <video id=“example_video_1” class=“video-js vjs-default-skin” poster=“http://video-js.zencoder.com/oceans-clip.png” preload=“auto” controls=“controls” width=“640” height=“264” data-setup=“{}”> <source src=“http://video-js.zencoder.com/oceans-clip.mp4” type=“video/mp4” /> <source src=“http://video-js.zencoder.com/oceans-clip.webm” type=“video/webm” /> <source src=“http://video-js.zencoder.com/oceans-clip.ogv” type=“video/ogg” /> <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> |
网页视频播放器video.js
