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 相关文章推荐
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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中simplexml_load_string函数使用说明
2011/01/01 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript时区函数介绍
2012/09/14 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
jquery 手势密码插件
2017/03/17 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
公司面试感谢信
2014/02/01 职场文书
优秀应届生求职信
2014/06/16 职场文书
求职意向书
2014/07/29 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技