09-HTML5举例：简单的视频播放器

我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。

index.html的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <!-- 引入字体图标的文件-->
  7.     <link rel="stylesheet" href="css/font-awesome.min.css"/>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         /*多媒体标题*/
  14.         figcaption{
  15.             text-align: center;
  16.             line-height: 150px;
  17.             font-family: "Microsoft Yahei";
  18.             font-size:24px;
  19.         }
  21.         /* 播放器*/
  22.         .palyer{
  23.             width: 720px;
  24.             height: 360px;
  25.             margin:10px auto;
  26.             border: 1px solid #000;
  27.             background: url(images/loading.gif) center no-repeat #000;
  28.             background-size:auto 100%;
  29.             position: relative;
  30.             border-radius: 20px;
  32.         }
  34.         .palyer video{
  35.             height:100%;
  36.             display: block;
  37.             margin:0 auto;
  38.             /*display: none;*/
  39.         }
  41.         /* 控制条*/
  43.         .controls{
  44.             width: 700px;
  45.             height:40px;
  46.             background-color: rgba(255, 255, 0, 0.3);
  47.             position: absolute;
  48.             bottom:10px;
  49.             left:10px;
  50.             border-radius: 10px;
  51.         }
  52.         /*开关*/
  53.         .switch{
  54.             position: absolute;
  55.             width: 20px;
  56.             height: 20px;
  57.             left:10px;
  58.             top:10px;
  60.             text-align: center;
  61.             line-height: 20px;
  62.             color:yellow;
  64.         }
  65.         /*进度条*/
  66.         .progress{
  67.             width: 432px;
  68.             height: 10px;
  69.             position: absolute;
  70.             background-color: rgba(255,255,255,0.4);
  71.             left:40px;
  72.             top:15px;
  73.             border-radius: 4px;
  74.             overflow: hidden;
  75.         }
  76.         /* 当前进度*/
  77.         .curr-progress{
  78.             width: 50%;
  79.             height: 10px;
  80.             background-color: #fff;
  81.         }
  82.         /* 时间模块*/
  83.         .time{
  84.             width: 120px;
  85.             height: 20px;
  86.             text-align: center;
  87.             line-height: 20px;
  88.             color:#fff;
  89.             position: absolute;
  90.             left:510px;
  91.             top:10px;
  92.             font-size:12px;
  94.         }
  95.         /*全屏*/
  96.         .extend{
  97.             position: absolute;
  98.             width: 20px;
  99.             height: 20px;
  101.             right:20px;
  102.             top:10px;
  104.             text-align: center;
  105.             line-height: 20px;
  106.             color:yellow;
  107.         }
  109.     </style>
  110. </head>
  111. <body>
  112.     <!-- 多媒体-->
  113.     <figure>
  114.         <!--  多媒体标题-->
  115.         <figcaption>视频案例</figcaption>
  116.         <div class="palyer">
  117.             <video src="video/fun.mp4"></video>
  118.             <!-- 控制条-->
  119.             <div class="controls">
  120.                 <!-- 播放暂停-->
  121.                 <a href="#" class="switch  icon-play"></a>
  122.                 <div class="progress">
  123.                     <!-- 当前进度-->
  124.                     <div class="curr-progress"></div>
  125.                 </div>
  126.                 <!-- 时间-->
  127.                 <div class="time">
  128.                     <span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
  129.                 </div>
  130.                 <!-- 全屏-->
  131.                 <a href="#" class="extend  icon-resize-full"></a>
  132.             </div>
  134.         </div>
  135.     </figure>
  137.     <script>
  138.         // 思路：
  139.         /*
  140.         * 1、点击按钮 实现播放暂停并且切换图标
  141.         * 2、算出视频的总时显示出出来
  142.         * 3、当视频播放的时候，进度条同步，当前时间同步
  143.         * 4、点击实现全屏
  144.         */
  146. //        获取需要的标签
  147.             var  video=document.querySelector('video');
  148. //          播放按钮
  149.             var  playBtn=document.querySelector('.switch');
  150. //          当前进度条
  151.             var  currProgress=document.querySelector('.curr-progress');
  152. //          当前时间
  153.             var  currTime=document.querySelector('.curr-time');
  154. //          总时间
  155.             var  totalTime=document.querySelector('.total-time');
  156. //          全屏
  157.             var extend=document.querySelector('.extend');
  159.             var tTime=0;
  161. //         1、点击按钮 实现播放暂停并且切换图标
  163.            playBtn.onclick=function(){
  164. //               如果视频播放 就暂停，如果暂停 就播放
  165.                if(video.paused){
  166. //                   播放
  167.                    video.play();
  168.                    //切换图标
  169.                    this.classList.remove('icon-play');
  170.                    this.classList.add('icon-pause');
  171.                }else{
  172. //                   暂停
  173.                     video.pause();
  174. //                   切换图标
  175.                    this.classList.remove('icon-pause');
  176.                    this.classList.add('icon-play');}
  177.            }
  179. //        2、算出视频的总时显示出出来
  180. //        当时加载完成后的事件，视频能播放的时候
  181.         video.oncanplay=function(){
  182. //             获取视频总时长
  183.             tTime=video.duration;
  184.             console.log(tTime);
  186. //          将总秒数 转换成 时分秒的格式：00：00:00
  187. //            小时
  188.             var h=Math.floor(tTime/3600);
  189. //            分钟
  190.             var m=Math.floor(tTime%3600/60);
  191. //            秒
  192.             var s=Math.floor(tTime%60);
  194. //            console.log(h);
  195. //            console.log(m);
  196. //            console.log(s);
  198. //            把数据格式转成 00:00：00
  199.             h=h>=10?h:"0"+h;
  200.             m=m>=10?m:"0"+m;
  201.             s=s>=10?s:"0"+s;
  204.             console.log(h);
  205.             console.log(m);
  206.             console.log(s);
  207. //            显示出来
  208.             totalTime.innerHTML=h+":"+m+":"+s;
  209.         }
  210. //   * 3、当视频播放的时候，进度条同步，当前时间同步
  211. //         当时当前时间更新的时候触发
  212.         video.ontimeupdate=function(){
  213. //            获取视频当前播放的时间
  214. //           console.log(video.currentTime);
  215. //            当前播放时间
  216.             var cTime=video.currentTime;
  217. //           把格式转成00:00:00
  219.             var h=Math.floor(cTime/3600);
  220. //            分钟
  221.             var m=Math.floor(cTime%3600/60);
  222. //            秒
  223.             var s=Math.floor(cTime%60);
  225. //            把数据格式转成 00:00：00
  226.             h=h>=10?h:"0"+h;
  227.             m=m>=10?m:"0"+m;
  228.             s=s>=10?s:"0"+s;
  230. //            显示出当前时间
  231.             currTime.innerHTML=h+":"+m+":"+s;
  233. //            改变进度条的宽度： 当前时间/总时间
  234.             var value=cTime/tTime;
  236.             currProgress.style.width=value*100+"%";
  238.         }
  240. //        全屏
  241.         extend.onclick=function(){
  242. //            全屏的h5代码
  243.             video.webkitRequestFullScreen();
  244.         }
  246.     </script>
  247. </body>
  248. </html>

工程文件：