video-js这款HTML5的播放器还是不错的

时间: 2015-10-29 / 分类: 网站制作技术 / 浏览次数: 4,083 views / 0个评论 发表评论

拿来放企业的宣传视频还OK

没有广告什么的,免费开源

但是先得把视频格式转一下

先弄个h264的mp4,然后转成webm和ogv

就有三种格式了,适合在不同的浏览器中播放

video-js的官网http://www.videojs.com/

然后下个最新版吧,比如我下的是video.js-5.0.2

然后把里面的dist复制出来一份,换个文件夹名称,比如我喜欢用video-js

接着在需要播放器页面的head里面插入引用

<link href="video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="video-js/ie8/videojs-ie8.min.js"></script>
<script src="video-js/video.min.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>

然后插入播放代码

<div id="videoDiv">
<video id="my_video_1" class="video-js vjs-default-skin" controls    preload="auto" width="230" height="180" poster="video-js/my_video_poster.png"    data-setup="{}">
<source src="foxkpc.mp4" type=’video/mp4′>
<source src="foxkpc.webm" type=’video/webm’ />
<source src="foxkpc.ogv" type=’video/ogg’ />
</video>
</div>

可以兼容一下IE

<script>
   if (navigator.userAgent.indexOf(‘MSIE’) >= 0){
       document.getElementById("videoDiv").innerHTML='<embed src="foxkpc.mp4" autostart="true" loop="true" width="230" height="180" >’;
   }
</script>

然后可以插入自动播放

<script>
videojs("my_video_1").ready(function(){
  var myPlayer = this;
  // EXAMPLE: Start playing the video.
  myPlayer.play();
});
</script>

 

我觉得还是蛮好用的

发表评论

您的昵称 *

您的邮箱 *

您的网站