我们采用 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>

    工程文件：

    • 2018-02-23-H5多媒体播放器.rar