前端蜗牛

adeng.y个人博客


视频播放插件video.5.13.0.js

发布时间:2018-08-10 作者:阿灯 阅读量:156

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )


官网:http://www.videojs.com/




视频播放video.js参数:


videojs(document.getElementById('claphands'), {
    controls: true, 
    preload: 'auto', // 预先加载视频
    width: 462, // 视频宽度
    height: 207, // 视频高度
    autoplay : false, // 是否自动播放
    flash: {
        swf: 'img/video.js_5.13.0_video-js.swf' //ie加载swf
    }
}, function() {});


文件下载:

VideoJS.zip


code:

<link href="img/video-js.min.css" rel="stylesheet">
<script src="img/videojs-ie8.min.js"></script>
<style>
*{padding:0;margin:0}
body{width:100%;background:#337ab7; color: #fff; }
a{ color: #fff; }
.none{display:none}
.video,.docs{ width: 800px; margin: 30px auto; }
.video-js .vjs-big-play-button{ top: 50%; left: 50%; margin-top: -0.8em; margin-left: -0.8em; width: 1.6em; height: 1.6em; border-radius: 50%; }
</style>

<div class="video">
    <video id="claphands" class="video-js vjs-default-skin vjs-big-play-centered">
      <source src="img/shjwj.mp4"> 
    </video>
  </div>

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="img/video.min.js"></script>
<script>
videojs(document.getElementById('claphands'), {
  controls: true,
  preload: 'auto',
  width: 800,
  height: 400,
  flash: {
    swf: 'img/video-js.swf'
  }
}, function() {});
</script>




标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台