javascript实现简单的html5视频播放器


Posted in Javascript onMay 06, 2015

效果:

javascript实现简单的html5视频播放器

javascript实现简单的html5视频播放器

代码很简单

js

define("html5_video_player", [ '../avalon-min'], function(avalon) {
  function formatTime(seconds) {
    var seconds = Math.round(seconds);
    var minutes = Math.floor(seconds / 60);
    seconds = Math.floor(seconds % 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
  }
  var playing=false,mute=false,vol=50,fs=false,active=false,inactivityTimeout=timer=null;
  avalon.bind($('control_btn'),'click',function(){
    if(!playing){
      $('html5_video').play();
      $('control_btn').className='html5_video_pause_btn inline-block';
      playing=true;
    }else{
      $('html5_video').pause();
      $('control_btn').className='html5_video_play_btn inline-block';
      playing=false;
    }
  });
  avalon.bind($('video_bar'),'click',function(e){
    var a=(e.clientX-$('video_bar').offsetLeft)/$('video_bar').offsetWidth;
    $('html5_video').currentTime =a.toFixed(2)*$('html5_video').duration;
  });
  avalon.bind($('vol_bar'),'click',function(e){
    var a=(e.clientX-$('vol_bar').offsetLeft-8)/$('vol_bar').offsetWidth;
    vol=$('html5_video').volume =a;
    $('vol_value').style.width=a*100+'%';
  });
  avalon.bind($('mute_icon'),'click',function(){
    if(!mute){
      $('html5_video').volume=0;
      $('mute_icon').className='html5_video_mute1';
      mute=true;
    }else{
      $('html5_video').volume=vol;
      $('mute_icon').className='html5_video_mute';
      mute=false;
    }
  });
  avalon.bind($('html5_video'),'loadedmetadata',function(){
    $('html5_video_duration').innerHTML=formatTime($('html5_video').duration);
    $('html5_video').volume=0;
  });
  avalon.bind($('html5_video'),'timeupdate',function(){
    $('html5_play_time').innerHTML=formatTime($('html5_video').currentTime);
    $('video_progress_bar').style.left=$('html5_video').currentTime/$('html5_video').duration*100+'%';
  });
  avalon.bind($('html5_video_fullscreen'),'click',function(e){
    if(!fs){
      toggle_fullscreen();
    }else{
      exit_fullscreen();
    }
  });
  document.onmozfullscreenchange = function() {
    if ($('html5_video').clientWidth +2!= document.documentElement.clientWidth) {
      exit_fullscreen();
    }
  };
  document.onwebkitfullscreenchange = function() {
    if ($('html5_video').clientWidth!= document.documentElement.clientWidth) {
      exit_fullscreen();
    }
  };
  function exit_fullscreen() {
    $('html5_video').className='';
    fs = false;
    active=false;
    $('video_control').className='';
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
  }
  function toggle_fullscreen() {
    $('html5_video').className='video_fs';
    fs = true;
    $('video_control').className='fullscreen';
    var elem=$('html5_video');
    if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  }
  function updateBuffered() {
     var v = $('html5_video');
     var r = v.buffered;
     if (r) {
      for (var i=0; i<r.length; i++) {
       var start = r.start(i);
       var end = r.end(i);
      }
      $('video_buffer_bar').style.width=end/$('html5_video').duration*100+'%';
     }
    }
  setInterval(updateBuffered,500);
  function b(){
    if(active){
      $('video_control').style.display='none';
      active=false;
      console.log(active);
    }
  }
  avalon.bind($('html5_video'),'mousemove',function(e){
    if(fs){
      clearTimeout(inactivityTimeout);
      active=true;
      $('video_control').style.display='block';
      inactivityTimeout = setTimeout(b, 5000);
    }
  });
});

html

<link type="text/css"
  href="http://localhost/twitter/css/html5_video_player.css"
  rel="stylesheet" />
<div id='wrap_html5_video'>
  <div id='html5_video_area'>
    <video id="html5_video" width="360" height="240">
      <source type=" video/mp4" src="http://localhost/twitter/videos/2.mp4"></source>
      <source type=" video/webm"
        src="http://localhost/twitter/videos/2.webm"></source>
    </video>
  </div>
  <div id='video_control'>
    <div id='video_bar'>
      <div id='video_buffer_bar'></div>
      <div id='video_progress_bar'></div>
    </div>
    <div id='play_control'>
      <ul>
        <li class='inline-block'><a
          class='html5_video_play_btn inline-block' id='control_btn'></a></li>
        <li class='inline-block'><a id='mute_icon'
          class='html5_video_mute'></a>
          <div id='vol_bar' class='inline-block'>
            <p id='vol_value'></p>
          </div></li>
        <li class='inline-block' id='html5_video_time'><span
          id='html5_play_time'>00:00</span><span>/</span><span
          id='html5_video_duration'>33:44</span></li>
        <li class='inline-block'><a id='html5_video_fullscreen'
          class='inline-block'></a></li>
      </ul>
    </div>
    <div id='a'></div>
  </div>
  <div id='buffered_log'></div>
</div>
<script type="text/javascript">
  require('html5/html5_video_player');
</script>

css

@CHARSET "UTF-8";

#wrap_html5_video {
  padding: 10px;
  width: 360px;
}

#vol_bar,#video_bar,#vol_value {
  height: 9px;
  background-color: #999999;
}

#vol_bar {
  width: 100px;
  cursor: pointer;
}

#vol_value {
  background-color: #179df7;
  width: 50%;
}

#html5_video {
  display: block;
  border: 1px solid #c0deed;
}

#video_buffer_bar {
  background-color: #179DF7;
  width: 0;
}

#video_progress_bar,#video_buffer_bar {
  position: absolute;
  height: 100%;
}

#video_progress_bar {
  background-color: #0066FF;
  width: 2px;
  left: 0;
}

.html5_video_pause_btn,.html5_video_play_btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.html5_video_play_btn {
  background: url("http://localhost/twitter/images/html5_video.jpg") 0 0
    no-repeat;
}

.html5_video_play_btn:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -41px
    0 no-repeat;
}

.html5_video_pause_btn {
  background: url("http://localhost/twitter/images/html5_video.jpg") 0
    -42px no-repeat;
}

.html5_video_pause_btn:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -41px
    -42px no-repeat;
}

#play_control a,#vol_bar {
  vertical-align: middle;
}

#html5_video_fullscreen {
  width: 25px;
  background: url("http://localhost/twitter/images/html5_video.jpg") 0
    -310px no-repeat;
  height: 18px;
}

#play_control #html5_video_time {
  font-size: 14px;
}

#play_control li,#play_control ul {
  font-size: 0;
}

#play_control li:last-child {
  position: absolute;
  right: 0;
}

.html5_video_mute1 {
  background: url("http://localhost/twitter/images/html5_video.jpg")
    no-repeat scroll -79px -170px rgba(0, 0, 0, 0);
}

.html5_video_mute {
  background: url("http://localhost/twitter/images/html5_video.jpg")
    no-repeat scroll 0 -170px rgba(0, 0, 0, 0);
}

#mute_icon {
  cursor: pointer;
  display: inline-block;
  height: 15px;
  width: 18px;
}

.html5_video_mute:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -19px
    -170px no-repeat;
}

#play_control li {
  height: 40px;
  vertical-align: top;
  margin: 0 5px;
}

#play_control li:after {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: '';
}

#play_control,#video_bar,#vol_bar {
  position: relative;
}

body .fullscreen {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2147483647;
  background-color: #fff;
}

video::-webkit-media-controls {
  display: none !important;
}
Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
7个jQuery最佳实践
Jan 12 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
You might like
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python 字符串换行的多种方式
2018/09/06 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python实现像awk一样分割字符串
2020/09/15 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
初中数学教学反思
2014/01/16 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
市场营销策划方案
2014/06/11 职场文书
六查六看剖析材料
2014/10/06 职场文书