<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <!--插入播放按钮得文字图标格式（具体使用方法可以百度http://fontawesome.dashgame.com/）-->
     <link rel="stylesheet" href="../css/font-awesome.css">
     <!--页面结构设置得样式-->
     <style>
         body {
             padding: 0;
             margin: 0;
             font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
             background-color: #F7F7F7;
         }

         a {
             text-decoration: none;
         }
         .playerTitle{
             width:100%;
             margin: 0 auto;
             line-height:100px;
             font-size: 40px;
             text-align: center;
         }
         .player{
             width: 720px;
             height: 360px;
             margin: 0 auto;
             background: url("../images/loading.gif") center no-repeat;
             background-size: cover;
             position: relative;
         }
         video{
             height:100%;
             margin: 0 auto;
             display: none;
         }
         .controls {
             width: 720px;
             height: 40px;
             position: absolute;
             left: 0px;
             bottom: -40px;
             background-color: #000;
         }
         .controls > .switch{
             width: 20px;
             height: 20px;
             display: block;
             font-size: 20px;
             color: #fff;
             position: absolute;
             left: 10px;
             top: 10px;
         }
         .controls > .expand{
             width: 20px;
             height: 20px;
             display: block;
             font-size: 20px;
             color: #fff;
             position: absolute;
             right: 10px;
             top: 10px;
         }
         .controls > .progress{
             width: 430px;
             height: 10px;
             position: absolute;
             left:40px;
             bottom:15px;
             background-color: #555;
         }
         .controls > .progress > .bar{
             width:100%;
             height:100%;
             border-radius: 3px;
             cursor: pointer;
             position: absolute;
             left: 0;
             top: 0;
             opacity: 0;
             z-index: 999;
         }
         .controls > .progress > .loaded{
             width:60%;
             height:100%;
             background-color: #999;
             border-radius: 3px;
             position: absolute;
             left: 0;
             top: 0;
             z-index: 2;
         }
         .controls > .progress > .elapse{
             width:0%;
             height:100%;
             background-color: #fff;
             border-radius: 3px;
             position: absolute;
             left: 0;
             top: 0;
             z-index: 3;
         }
         .controls > .time{
             height: 20px;
             position: absolute;
             left:490px;
             top: 10px;
             color: #fff;
             font-size: 14px;
         }
     </style>
 </head>
 <body>
 <h3 class="playerTitle">视频播放器</h3>
 <div class="player">
     <video src="../mp4/chrome.mp4"></video>
     <div class="controls">
         <!--javascript:; a链接点击不让跳转       fa 库名fa-play 文字名      文字库使用方法-->
         <a href="javascript:;" class="switch fa fa-play"></a>
         <a href="javascript:;" class="expand fa fa-expand"></a>
         <div class="progress">
             <!--点击的透明层，效果是点击改变进度条和播放得当前时间-->
             <div class="bar"></div>
             <!--缓冲进度条（由于是本地视频加载比较快所以就没法感受到没写0.0）-->
             <div class="loaded"></div>
             <!--播放进度条-->
             <div class="elapse"></div>
         </div>
         <div class="time">
             <!--播放当前时间-->
             <span class="currentTime">00:00:00</span>
             \
             <!--视频时间总长度-->
             <span class="totalTime">00:00:00</span>
         </div>
     </div>
 </div>
 <!--基于jquery的文件引入-->
 <script src="./jquery.min.js"></script>
 <script>
     /*通过jq来实现功能*/
     $(function(){
         /*1.获取播放器 对象的转换,把jquery转换为dom对象*/
         var video=$("video")[0];

         /*2.实现播放与暂停*/
         $(".switch").click(function(){
             /*实现播放与暂停的切换：如果是暂停>>播放  ，如果是播放 >> 暂停*/
             if(video.paused){
                 video.play();
                 /*移除暂停样式，添加播放样式*/
             }
             else{
                 video.pause();
                 /*移除播放样式，添加暂停样式*/
             }
             /*设置标签的样式  fa-pause:暂停   fa-play：播放*/
             $(this).toggleClass("fa-play fa-pause");
         });

         /*3.实现全屏操作*/
         $(".expand").click(function(){
             /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
             if(video.requestFullScreen){
                 video.requestFullScreen();
             }
             else if(video.webkitRequestFullScreen){
                 video.webkitRequestFullScreen();
             }
             else if(video.mozRequestFullScreen){
                 video.mozRequestFullScreen();
             }
             else if(video.msRequestFullScreen){
                 video.msRequestFullScreen();
             }
         });

         /*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
         video.oncanplay=function(){
             setTimeout(function(){
                 /*1.将视频文件设置为显示*/
                 video.style.display="block";
                 /*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
                 var total=video.duration; //01:01:40   00:00:36
                 /*3.计算时分少  60*60=3600
                  * 3700:3700/3600
                  * 3700:3700%3600 >> 100 /60*/
                 /*var hour=Math.floor(total/3600);
                  /!*补0操作*!/
                  hour=hour<10?"0"+hour:hour;
                  var minute=Math.floor(total%3600/60);
                  minute=minute<10?"0"+minute:minute;
                  var second=Math.floor(total%60);
                  second=second<10?"0"+second:second;*/
                 var result=getResult(total)
                 /*4.将计算结果展示在指定的dom元素中*/
                 $(".totalTime").html(result);
             },2000);
         }

         /*通过总时长计算出时分秒*/
         function getResult(time){
             var hour=Math.floor(time/3600);
             /*补0操作*/
             hour=hour<10?"0"+hour:hour;
             var minute=Math.floor(time%3600/60);
             minute=minute<10?"0"+minute:minute;
             var second=Math.floor(time%60);
             second=second<10?"0"+second:second;
             /*返回结果*/
             return hour+":"+minute+":"+second;
         }

         /*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
          * 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
         video.ontimeupdate=function(){
             /*1.获取当前的播放时间*/
             var current=video.currentTime;
             /*2.计算出时分秒*/
             var result=getResult(current);
             /*3.将结果展示在指定的dom元素中*/
             $(".currentTime").html(result);
             /*4.设置当前播放进度条样式  0.12>>0.12*100=12+%>12%*/
             var percent=current/video.duration*100+"%";
             $(".elapse").css("width",percent);
         }

         /*6.实现视频的跳播*/
         $(".bar").click(function(e){
             /*1.获取当前鼠标相对于父元素的left值--偏移值*/
             var offset= e.offsetX;
             /*2.计算偏移值相对总父元素总宽度的比例*/
             var percent=offset/$(this).width();
             /*3.计算这个位置对应的视频进度值*/
             var current=percent*video.duration;
             /*4.设置当前视频的currentTime*/
             video.currentTime=current;
         });

         /*7.播放完毕之后，重置播放器的状态*/
         video.onended=function(){
 //            当前播放时间清零
             video.currentTime=0;
 //            播放按钮的事件由暂停替换位播放
             $(".switch").removeClass("fa-pause").addClass("fa-play");
         }
     });
 </script>
 </body>
 </html>

h5自定义播放器得实现原理的更多相关文章

  1. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 基于 AVPlayer 自定义播放器

    如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...

  3. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  4. 视频播放—— H5同层播放器接入规范

    H5同层播放器接入规范 x5-video-player-type 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器 x5-video-playe ...

  5. 用H5和js写一个移动端自定义播放器

    前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...

  6. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  7. H5音乐播放器源码地址

    源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA      安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...

  8. H5音乐播放器源码共享

    由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w   H5源码!暂时只支持手机适配,电脑端 ...

  9. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

随机推荐

  1. PHP获取指定日期是星期几的实现方法

    这篇文章主要介绍了PHP获取指定日期是星期几的实现方法,涉及php针对日期的读取.判断与字符串.数组相关运算操作技巧,需要的朋友可以参考下 本文实例讲述了PHP获取指定日期是星期几的实现方法.分享给大 ...

  2. linux命令学习笔记（41）：ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前 那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程 ...

  3. 【leetcode刷题笔记】Sqrt(x)

    Implement int sqrt(int x). Compute and return the square root of x. 题解:二分的方法,从0,1,2.....x搜索sqrt(x)的值 ...

  4. 关于Windows与Linux下32位与64位开发中的数据类型长度的一点汇总

    32位与64位的数据类型长度是不一样的,而且windows和linux也有些许区别,下面把64位下的数据长度列表如下(无符号unsigned和有符号的长度一样): linux64            ...

  5. bzoj3224Treap

    Splay版本的会补... 在学了2个小时Splay之后深感Treap的优越 特地又花了20分钟打了个Treap 至于这些平衡树的优缺点 可以用平衡方式来直观的感受到 现在平衡树们面对着这样的一个问题 ...

  6. bzoj 4817: [Sdoi2017]树点涂色 LCT+树链剖分+线段树

    题目: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob可能会进 ...

  7. bzoj 2733 永无乡 线段树

    题目: 支持两种操作: 合并两点所在的联通块 查询某点所在联通块内权值第k小. 题解 平衡树启发式合并随便搞一搞就好了. 我写了一个线段树合并 #include <cstdio> #inc ...

  8. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  9. Android audioManager

    Android audioManager AudioManager provides access to volume and ringer mode control. 获取对象 Use Contex ...

  10. Java enum（枚举）使用详解之三

    DK1.5引入了新的类型——枚举.在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是: publicstaticfianl... ...