你是否有一个梦想？用JavaScript开发一款自定义配置视频播放器 - Go语言中文社区

你是否有一个梦想？用JavaScript开发一款自定义配置视频播放器

前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法?是因为之前看一些学习视频网站时，看到它们做的视频播放器非常Nice!于是，就打算抽空开发一款属于自己的视频播放器。话不多说，一起来实战吧!

项目展示


(这只是一张图片哦~)

这张图就是我们的成品，还等什么?赶紧来实战吧!

实战

我会把完整源码放在github上，欢迎来star，地址在文末。

首先，我们会使用最原生的JavaScript来实现，老大哥肯定要打头阵啊!

一、JavaScript

1.iconfont.css：阿里字体图标文件，你可以在上面找到很多漂亮的图标。

2.index.css：项目样式文件。

3.index.js：项目逻辑文件。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>VamVideo(原生js版)</title> 
  7.     <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> 
  8.     <link rel="stylesheet" href="./css/index.css" /> 
  9.   </head> 
  10.   <body> 
  11.     <div class="video-box"> 
  12.       <video class="video-player" preload="auto" poster="./img/bg.png"> 
  13.         <source 
  14.           src="https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4" 
  15.         /> 
  16.         <source /> 
  17.       </video> 
  18.       <div class="bottom-tool"> 
  19.         <div class="pv-bar"> 
  20.           <div class="pv-played"></div> 
  21.           <div class="pv-dot"></div> 
  22.         </div> 
  23.         <div class="pv-controls"> 
  24.           <div class="pc-con-l"> 
  25.             <div class="play-btn"> 
  26.               <i class="iconfont icon-bofang"></i> 
  27.               <i class="iconfont icon-zanting hide"></i> 
  28.             </div> 
  29.             <div class="pv-time"> 
  30.               <span class="pv-currentTime">00:00:00</span> 
  31.               <span>/</span> 
  32.               <span class="pv-duration">00:00:00</span> 
  33.             </div> 
  34.           </div> 
  35.           <div class="pc-con-r"> 
  36.             <div class="pv-listen ml"> 
  37.               <div class="pv-yl"> 
  38.                 <p class="pv-ol"></p> 
  39.                 <p class="pv-bg"></p> 
  40.               </div> 
  41.               <div class="pv-iconyl"> 
  42.                 <i class="iconfont icon-yinliang"></i> 
  43.                 <i class="iconfont icon-jingyin hide"></i> 
  44.               </div> 
  45.             </div> 
  46.             <div class="pv-speed ml"> 
  47.               <p class="pv-spnum">1x</p> 
  48.               <ul class="selectList"> 
  49.                 <li>0.5x</li> 
  50.                 <li>1x</li> 
  51.                 <li>1.25x</li> 
  52.                 <li>1.5x</li> 
  53.                 <li>2x</li> 
  54.               </ul> 
  55.             </div> 
  56.             <div class="pv-screen ml"> 
  57.               <i class="iconfont icon-quanping"></i> 
  58.               <i class="iconfont icon-huanyuan hide"></i> 
  59.             </div> 
  60.           </div> 
  61.         </div> 
  62.       </div> 
  63.     </div> 
  64.     <script src="./js/index.js"></script> 
  65.   </body> 
  66. </html> 

我们主要看下逻辑文件index.js。

  1. let timer = null; 
  2. let disX = 0; 
  3. let disL = 0; 
  4. function $(el) { 
  5.   return document.querySelector(el); 
  6. } 
  7. function showEl(el) { 
  8.   $(el).style.display = "block"; 
  9. } 
  10. function hideEl(el) { 
  11.   $(el).style.display = "none"; 
  12. } 
  13. function setVp(w, h) { 
  14.   $(".video-player").style.width = w + "px"; 
  15.   $(".video-player").style.height = h + "px"; 
  16.   $(".video-box").style.width = w + "px"; 
  17.   $(".video-box").style.height = h + "px"; 
  18.   $(".pv-bar").style.width = w + "px"; 
  19. } 
  20. // 时间格式化 
  21. function changeTime(iNum) { 
  22.   let iN = parseInt(iNum); 
  23.   const iH = toZero(Math.floor(iN / 3600)); 
  24.   const iM = toZero(Math.floor((iN % 3600) / 60)); 
  25.   const iS = toZero(Math.floor(iN % 60)); 
  26.   return iH + ":" + iM + ":" + iS; 
  27. } 
  28. // 整0处理 
  29. function toZero(num) { 
  30.   if (num <= 9) { 
  31.     return "0" + num; 
  32.   } else { 
  33.     return "" + num; 
  34.   } 
  35. } 
  36. // 底部控制栏 
  37. $(".video-box").onmouseenter = function () { 
  38.   $(".bottom-tool").style.bottom = "0px"; 
  39. }; 
  40. $(".video-box").onmouseleave = function () { 
  41.   $(".bottom-tool").style.bottom = "-45px"; 
  42. }; 
  43.  
  44. // 倍速播放栏(显示/隐藏) 
  45. $(".pv-spnum").onmouseover = function () { 
  46.   showEl(".selectList"); 
  47. }; 
  48. $(".pv-controls").onmouseleave = function () { 
  49.   hideEl(".selectList"); 
  50. }; 
  51.  
  52. // 播放/暂停 
  53. $(".play-btn").onclick = function () { 
  54.   if ($(".video-player").paused) { 
  55.     $(".video-player").play(); 
  56.     hideEl(".icon-bofang"); 
  57.     showEl(".icon-zanting"); 
  58.     nowTime(); 
  59.     timer = setInterval(nowTime, 1000); 
  60.   } else { 
  61.     $(".video-player").pause(); 
  62.     showEl(".icon-bofang"); 
  63.     hideEl(".icon-zanting"); 
  64.     clearInterval(timer); 
  65.   } 
  66. }; 
  67.  
  68. // 总时长 
  69. $(".video-player").oncanplay = function () { 
  70.   $(".pv-duration").innerHTML = changeTime($(".video-player").duration); 
  71. }; 
  72.  
  73. // 播放结束 
  74. $(".video-player").onended = function (params) { 
  75.   showEl(".icon-bofang"); 
  76.   hideEl(".icon-zanting"); 
  77. }; 
  78.  
  79. // 播放时长 
  80. function nowTime() { 
  81.   $(".pv-currentTime").innerHTML = changeTime($(".video-player").currentTime); 
  82.   let scale = $(".video-player").currentTime / $(".video-player").duration; 
  83.   let w = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  84.   $(".pv-dot").style.left = scale * w + "px"; 
  85.   $(".pv-played").style.width = scale * w + "px"; 
  86. } 
  87.  
  88. // 静音/取消静音 
  89. $(".pv-iconyl").onclick = function () { 
  90.   if ($(".video-player").muted) { 
  91.     $(".video-player").volume = 1; 
  92.     hideEl(".icon-jingyin"); 
  93.     showEl(".icon-yinliang"); 
  94.     $(".video-player").muted = false; 
  95.   } else { 
  96.     $(".video-player").volume = 0; 
  97.     showEl(".icon-jingyin"); 
  98.     hideEl(".icon-yinliang"); 
  99.     $(".video-player").muted = true; 
  100.   } 
  101. }; 
  102. let isfullScreen = false; 
  103. // 全屏 
  104. $(".pv-screen").onclick = function () { 
  105.   const w = document.documentElement.clientWidth || document.body.clientWidth; 
  106.   const h = document.documentElement.clientHeight || document.body.clientHeight; 
  107.   isfullScreen = !isfullScreen; 
  108.   if (isfullScreen) { 
  109.     setVp(w, h); 
  110.     hideEl(".icon-quanping"); 
  111.     showEl(".icon-huanyuan"); 
  112.   } else { 
  113.     setVp(900, 480); 
  114.     showEl(".icon-quanping"); 
  115.     hideEl(".icon-huanyuan"); 
  116.   } 
  117. }; 
  118. // 播放进度条 
  119. $(".pv-dot").onmousedown = function (ev) { 
  120.   let ev1 = ev || window.event; 
  121.   disX = ev1.clientX - $(".pv-dot").offsetLeft; 
  122.   document.onmousemove = function (ev) { 
  123.     let ev2 = ev || window.event; 
  124.     let L = ev2.clientX - disX; 
  125.     if (L < 0) { 
  126.       L = 0; 
  127.     } else if (L > $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth) { 
  128.       L = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  129.     } 
  130.     $(".pv-dot").style.left = L + "px"; 
  131.  
  132.     let scale = L / ($(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth); 
  133.     $(".video-player").currentTime = scale * $(".video-player").duration; 
  134.     nowTime(); 
  135.   }; 
  136.  
  137.   document.onmouseup = function () { 
  138.     document.onmousemove = null; 
  139.   }; 
  140.  
  141.   return false; 
  142. }; 
  143. // 音量控制 
  144. $(".pv-ol").onmousedown = function (ev) { 
  145.   let ev1 = ev || window.event; 
  146.   disL = ev1.clientX - $(".pv-ol").offsetLeft; 
  147.   document.onmousemove = function (ev) { 
  148.     let ev2 = ev || window.event; 
  149.     let L = ev2.clientX - disL; 
  150.     if (L < 0) { 
  151.       L = 0; 
  152.     } else if (L > $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth) { 
  153.       L = $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth; 
  154.     } 
  155.     $(".pv-ol").style.left = L + "px"; 
  156.     let scale = L / ($(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth); 
  157.     $(".pv-bg").style.width = $(".pv-ol").offsetLeft + "px"; 
  158.     if ($(".pv-ol").offsetLeft !== 0) { 
  159.       showEl(".icon-yinliang"); 
  160.       hideEl(".icon-jingyin"); 
  161.     } else { 
  162.       showEl(".icon-jingyin"); 
  163.       hideEl(".icon-yinliang"); 
  164.     } 
  165.     $(".video-player").volume = scale; 
  166.   }; 
  167.  
  168.   document.onmouseup = function () { 
  169.     document.onmousemove = null; 
  170.   }; 
  171.  
  172.   return false; 
  173. }; 
  174. // 播放速度 
  175. $(".selectList").onclick = function (e) { 
  176.   let ev = e || window.event; 
  177.   hideEl(".selectList"); 
  178.   $(".pv-spnum").innerText = ev.target.innerText; 
  179.   const value = ev.target.innerText.replace("x", ""); 
  180.   $(".video-player").playbackRate = value; 
  181. }; 

这样写是可以实现一个视频播放器，你可以通过改样式文件还有部分逻辑文件来实现一个自定义配置视频播放器，但是这种效果不太好，所以我们将通过使用Es6中的Class类来重写这个自定义配置视频播放器。

二、Class类

1.vp.js：class类逻辑文件。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>VamVideo(Class类版)</title> 
  7.     <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> 
  8.     <link rel="stylesheet" href="./css/index.css" /> 
  9.   </head> 
  10.   <body> 
  11.     <div class="video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> 
  12.       <video class="video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"></video> 
  13.       <div class="bottom-tool"> 
  14.         <div class="pv-bar"> 
  15.           <div class="pv-played"></div> 
  16.           <div class="pv-dot" onmousedown="vp.useTime()"></div> 
  17.         </div> 
  18.         <div class="pv-controls" onmouseleave="vp.selectListHide()"> 
  19.           <div class="pc-con-l"> 
  20.             <div class="play-btn" onclick="vp.usePlay()"> 
  21.               <i class="iconfont icon-bofang"></i> 
  22.               <i class="iconfont icon-zanting hide"></i> 
  23.             </div> 
  24.             <div class="pv-time"> 
  25.               <span class="pv-currentTime">00:00:00</span> 
  26.               <span>/</span> 
  27.               <span class="pv-duration">00:00:00</span> 
  28.             </div> 
  29.           </div> 
  30.           <div class="pc-con-r"> 
  31.             <div class="pv-listen ml"> 
  32.               <div class="pv-yl"> 
  33.                 <p class="pv-ol" onmousedown="vp.useListen()"></p> 
  34.                 <p class="pv-bg"></p> 
  35.               </div> 
  36.               <div class="pv-iconyl" onclick="vp.useVolume()"> 
  37.                 <i class="iconfont icon-yinliang"></i> 
  38.                 <i class="iconfont icon-jingyin hide"></i> 
  39.               </div> 
  40.             </div> 
  41.             <div class="pv-speed ml"> 
  42.               <p class="pv-spnum" onmouseover="vp.selectListShow()">1x</p> 
  43.               <ul class="selectList" onclick="vp.useSpnum()"> 
  44.                 <li>0.5x</li> 
  45.                 <li>1x</li> 
  46.                 <li>1.25x</li> 
  47.                 <li>1.5x</li> 
  48.                 <li>2x</li> 
  49.               </ul> 
  50.             </div> 
  51.             <div class="pv-screen ml" onclick="vp.fullScreen()"> 
  52.               <i class="iconfont icon-quanping"></i> 
  53.               <i class="iconfont icon-huanyuan hide"></i> 
  54.             </div> 
  55.           </div> 
  56.         </div> 
  57.       </div> 
  58.     </div> 
  59.     <script src="./js/vp.js"></script> 
  60.     <script> 
  61.       const vp = new VamVideo( 
  62.         document.querySelector(".video-box"), // 挂载父节点 
  63.         { // 视频属性 
  64.           poster:"./img/bg.png", 
  65.           src:"https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
  66.           preload:"auto", 
  67.           // loop:"loop", 
  68.           // autoplay:"autoplay" 
  69.         }, 
  70.         { // 视频样式 
  71.           width:"1200px", 
  72.           height:"600px" 
  73.         } 
  74.       ); 
  75.     </script> 
  76.   </body> 
  77. </html> 
 看到上面的代码，已经发现我们可以配置视频播放器了，那么这个vp.js到底是何方神圣呢?我们来看下。
  1. class VamVideo { 
  2.   constructor(vp, attrObj, styleObj) { 
  3.     this.timer = null; 
  4.     this.disX = 0; 
  5.     this.disL = 0; 
  6.     this.isfullScreen = false; 
  7.     for (const key in attrObj) { 
  8.       if (Object.hasOwnProperty.call(attrObj, key)) { 
  9.         this.$(".video-player").setAttribute(key, attrObj[key]); 
  10.       } 
  11.     } 
  12.     for (const key in styleObj) { 
  13.       if (Object.hasOwnProperty.call(styleObj, key)) { 
  14.         this.$(".video-box").style[`${key}`] = styleObj[key]; 
  15.         key === "width" 
  16.           ? (this.vbw = styleObj.width) 
  17.           : (this.vbw = vp.offsetWidth); 
  18.         key === "height" 
  19.           ? (this.vbh = styleObj.height) 
  20.           : (this.vbh = vp.offsetHeight); 
  21.       } 
  22.     } 
  23.   } 
  24.   $ = (el) => document.querySelector(el); 
  25.   showEl = (el) => { 
  26.     this.$(el).style.display = "block"; 
  27.   }; 
  28.   hideEl = (el) => { 
  29.     this.$(el).style.display = "none"; 
  30.   }; 
  31.   setVp = (w, h) => { 
  32.     const _w = String(w).indexOf("px") != -1 ? w : w + "px"; 
  33.     const _h = String(h).indexOf("px") != -1 ? h : h + "px"; 
  34.     this.$(".video-player").style.width = _w; 
  35.     this.$(".video-player").style.height = _h; 
  36.     this.$(".video-box").style.width = _w; 
  37.     this.$(".video-box").style.height = _h; 
  38.     this.$(".pv-bar").style.width = _w; 
  39.   }; 
  40.   nowTime = () => { 
  41.     this.$(".pv-currentTime").innerHTML = this.changeTime( 
  42.       this.$(".video-player").currentTime 
  43.     ); 
  44.     let scale = 
  45.       this.$(".video-player").currentTime / this.$(".video-player").duration; 
  46.     let w = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth; 
  47.     this.$(".pv-dot").style.left = scale * w + "px"; 
  48.     this.$(".pv-played").style.width = scale * w + "px"; 
  49.   }; 
  50.   changeTime = (iNum) => { 
  51.     let iN = parseInt(iNum); 
  52.     const iH = this.toZero(Math.floor(iN / 3600)); 
  53.     const iM = this.toZero(Math.floor((iN % 3600) / 60)); 
  54.     const iS = this.toZero(Math.floor(iN % 60)); 
  55.     return iH + ":" + iM + ":" + iS; 
  56.   }; 
  57.   toZero = (num) => { 
  58.     if (num <= 9) { 
  59.       return "0" + num; 
  60.     } else { 
  61.       return "" + num; 
  62.     } 
  63.   }; 
  64.   // 底部控制栏(显示/隐藏) 
  65.   bottomTup = () => { 
  66.     this.$(".bottom-tool").style.bottom = "0px"; 
  67.   }; 
  68.   bottomTdow = () => { 
  69.     this.$(".bottom-tool").style.bottom = "-45px"; 
  70.   }; 
  71.   // 倍速播放栏(显示/隐藏) 
  72.   selectListShow = () => { 
  73.     this.showEl(".selectList"); 
  74.   }; 
  75.   selectListHide = () => { 
  76.     this.hideEl(".selectList"); 
  77.   }; 
  78.   // 播放/暂停 
  79.   usePlay = () => { 
  80.     if (this.$(".video-player").paused) { 
  81.       this.$(".video-player").play(); 
  82.       this.hideEl(".icon-bofang"); 
  83.       this.showEl(".icon-zanting"); 
  84.       this.nowTime(); 
  85.       this.timer = setInterval(this.nowTime, 1000); 
  86.     } else { 
  87.       this.$(".video-player").pause(); 
  88.       this.showEl(".icon-bofang"); 
  89.       this.hideEl(".icon-zanting"); 
  90.       clearInterval(this.timer); 
  91.     } 
  92.   }; 
  93.   // 总时长 
  94.   useOnplay = () => { 
  95.     this.$(".pv-duration").innerHTML = this.changeTime( 
  96.       this.$(".video-player").duration 
  97.     ); 
  98.   }; 
  99.   // 播放结束 
  100.   useEnd = () => { 
  101.     this.showEl(".icon-bofang"); 
  102.     this.hideEl(".icon-zanting"); 
  103.   }; 
  104.   // 静音 
  105.   useVolume = () => { 
  106.     if (this.$(".video-player").muted) { 
  107.       this.$(".video-player").volume = 1; 
  108.       this.hideEl(".icon-jingyin"); 
  109.       this.showEl(".icon-yinliang"); 
  110.       this.$(".video-player").muted = false; 
  111.     } else { 
  112.       this.$(".video-player").volume = 0; 
  113.       this.showEl(".icon-jingyin"); 
  114.       this.hideEl(".icon-yinliang"); 
  115.       this.$(".video-player").muted = true; 
  116.     } 
  117.   }; 
  118.   // 全屏 
  119.   fullScreen = () => { 
  120.     const w = document.documentElement.clientWidth || document.body.clientWidth; 
  121.     const h = 
  122.       document.documentElement.clientHeight || document.body.clientHeight; 
  123.     this.isfullScreen = !this.isfullScreen; 
  124.     if (this.isfullScreen) { 
  125.       this.setVp(w, h); 
  126.       this.hideEl(".icon-quanping"); 
  127.       this.showEl(".icon-huanyuan"); 
  128.     } else { 
  129.       console.log("w" + this.vbw, "h" + this.vbh); 
  130.       this.setVp(this.vbw, this.vbh); 
  131.       this.showEl(".icon-quanping"); 
  132.       this.hideEl(".icon-huanyuan"); 
  133.     } 
  134.   }; 
  135.   // 播放进度条 
  136.   useTime = (ev) => { 
  137.     let ev1 = ev || window.event; 
  138.     this.disX = ev1.clientX - this.$(".pv-dot").offsetLeft; 
  139.     document.onmousemove = (ev) => { 
  140.       let ev2 = ev || window.event; 
  141.       let L = ev2.clientX - this.disX; 
  142.       if (L < 0) { 
  143.         L = 0; 
  144.       } else if ( 
  145.         L > 
  146.         this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth 
  147.       ) { 
  148.         L = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth; 
  149.       } 
  150.       this.$(".pv-dot").style.left = L + "px"; 
  151.       let scale = 
  152.         L / (this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth); 
  153.       this.$(".video-player").currentTime = 
  154.         scale * this.$(".video-player").duration; 
  155.       this.nowTime(); 
  156.     }; 
  157.     document.onmouseup = function () { 
  158.       document.onmousemove = null; 
  159.     }; 
  160.     return false; 
  161.   }; 
  162.   // 音量控制 
  163.   useListen = (ev) => { 
  164.     let ev1 = ev || window.event; 
  165.     this.disL = ev1.clientX - this.$(".pv-ol").offsetLeft; 
  166.     document.onmousemove = (ev) => { 
  167.       let ev2 = ev || window.event; 
  168.       let L = ev2.clientX - this.disL; 
  169.       if (L < 0) { 
  170.         L = 0; 
  171.       } else if ( 
  172.         L > 
  173.         this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth 
  174.       ) { 
  175.         L = this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth; 
  176.       } 
  177.       this.$(".pv-ol").style.left = L + "px"; 
  178.       let scale = 
  179.         L / (this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth); 
  180.       this.$(".pv-bg").style.width = this.$(".pv-ol").offsetLeft + "px"; 
  181.       if (this.$(".pv-ol").offsetLeft !== 0) { 
  182.         this.showEl(".icon-yinliang"); 
  183.         this.hideEl(".icon-jingyin"); 
  184.       } else { 
  185.         this.showEl(".icon-jingyin"); 
  186.         this.hideEl(".icon-yinliang"); 
  187.       } 
  188.       this.$(".video-player").volume = scale; 
  189.     }; 
  190.     document.onmouseup = function () { 
  191.       document.onmousemove = null; 
  192.     }; 
  193.     return false; 
  194.   }; 
  195.   // 播放速度 
  196.   useSpnum = (e) => { 
  197.     let ev = e || window.event; 
  198.     this.hideEl(".selectList"); 
  199.     this.$(".pv-spnum").innerText = ev.target.innerText; 
  200.     const value = ev.target.innerText.replace("x", ""); 
  201.     this.$(".video-player").playbackRate = value; 
  202.   }; 
  203. } 

这样不仅可以自定义配置一个视频播放器，逻辑文件中的每一个方法函数还非常的简单明了，可以说是达到我们要求的目的了。但是我们可以更简洁。

三、模板字符串

1.strvp.js：把标签语句放在了模板字符串中。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>VamVideo(模板字符版)</title> 
  7.     <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> 
  8.     <link rel="stylesheet" href="./css/index.css" /> 
  9.   </head> 
  10.   <body> 
  11.     <!-- 挂载点 --> 
  12.     <div id="app"></div> 
  13.  
  14.     <script src="./js/strvp.js"></script> 
  15.     <script src="./js/vp.js"></script> 
  16.     <script> 
  17.       const node = document.querySelector("#app"); 
  18.       node.insertAdjacentHTML("beforeEnd", strHtml); 
  19.        
  20.       const vp = new VamVideo( 
  21.         document.querySelector(".video-box"), // 挂载父节点 
  22.         { // 视频属性 
  23.           poster:"./img/bg.png", 
  24.           src:"https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
  25.           preload:"auto", 
  26.           // loop:"loop", 
  27.           // autoplay:"autoplay" 
  28.         }, 
  29.         { // 视频样式 
  30.           width:"1200px", 
  31.           height:"600px" 
  32.         } 
  33.       ); 
  34.     </script> 
  35.   </body> 
  36. </html> 

可以看到上面的代码，我直接把标签语句转换为字符串直接挂载到父节点上，这样就更加简洁了。下面的代码就是一堆标签语句。

  1. const strHtml = ` 
  2. <div class="video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> 
  3.       <video class="video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"></video> 
  4.       <div class="bottom-tool"> 
  5.         <div class="pv-bar"> 
  6.           <div class="pv-played"></div> 
  7.           <div class="pv-dot" onmousedown="vp.useTime()"></div> 
  8.         </div> 
  9.         <div class="pv-controls" onmouseleave="vp.selectListHide()"> 
  10.           <div class="pc-con-l"> 
  11.             <div class="play-btn" onclick="vp.usePlay()"> 
  12.               <i class="iconfont icon-bofang"></i> 
  13.               <i class="iconfont icon-zanting hide"></i> 
  14.             </div> 
  15.             <div class="pv-time"> 
  16.               <span class="pv-currentTime">00:00:00</span> 
  17.               <span>/</span> 
  18.               <span class="pv-duration">00:00:00</span> 
  19.             </div> 
  20.           </div> 
  21.           <div class="pc-con-r"> 
  22.             <div class="pv-listen ml"> 
  23.               <div class="pv-yl"> 
  24.                 <p class="pv-ol" onmousedown="vp.useListen()"></p> 
  25.                 <p class="pv-bg"></p> 
  26.               </div> 
  27.               <div class="pv-iconyl" onclick="vp.useVolume()"> 
  28.                 <i class="iconfont icon-yinliang"></i> 
  29.                 <i class="iconfont icon-jingyin hide"></i> 
  30.               </div> 
  31.             </div> 
  32.             <div class="pv-speed ml"> 
  33.               <p class="pv-spnum" onmouseover="vp.selectListShow()">1x</p> 
  34.               <ul class="selectList" onclick="vp.useSpnum()"> 
  35.                 <li>0.5x</li> 
  36.                 <li>1x</li> 
  37.                 <li>1.25x</li> 
  38.                 <li>1.5x</li> 
  39.                 <li>2x</li> 
  40.               </ul> 
  41.             </div> 
  42.             <div class="pv-screen ml" onclick="vp.fullScreen()"> 
  43.               <i class="iconfont icon-quanping"></i> 
  44.               <i class="iconfont icon-huanyuan hide"></i> 
  45.             </div> 
  46.           </div> 
  47.         </div> 
                        
                        
    
                            
                            版权声明：本文来源51CTO，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
    
                            原文链接：http://developer.51cto.com/art/202012/636091.htm
    
                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
                        
    
                        
                        
    
                            
      
                                
    • 
                                    
                                    发表于 2021-05-17 02:06:49
                                
      • 
                                
    • 阅读 ( 871 )
      • 
                                
    • 分类：
                                
      •

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！