文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 14:56

关注

前言

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

项目展示


(这只是一张图片哦~)

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

实战

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

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

一、JavaScript

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

index.css：项目样式文件。

index.js：项目逻辑文件。

  1.  
  2. "en"> 
  3.    
  4.     "UTF-8" /> 
  5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     VamVideo(原生js版) 
  7.     "stylesheet" href="./css/iconfont/iconfont.css" /> 
  8.     "stylesheet" href="./css/index.css" /> 
  9.    
  10.    
  11.     "video-box"> 
  12.       "video-player" preload="auto" poster="./img/bg.png"> 
  13.         
  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.          
  17.        
  18.       "bottom-tool"> 
  19.         "pv-bar"> 
  20.           "pv-played">
 
  •           "pv-dot">
    •  
  •          
  •         "pv-controls"> 
  •           "pc-con-l"> 
  •             "play-btn"> 
  •               "iconfont icon-bofang"> 
  •               "iconfont icon-zanting hide"> 
  •              
  •             "pv-time"> 
  •               "pv-currentTime">00:00:00 
  •               / 
  •               "pv-duration">00:00:00 
  •              
  •            
  •           "pc-con-r"> 
  •             "pv-listen ml"> 
  •               "pv-yl"> 
  •                 "pv-ol">

     
  •                 "pv-bg">

     
  •                
  •               "pv-iconyl"> 
  •                 "iconfont icon-yinliang"> 
  •                 "iconfont icon-jingyin hide"> 
  •                
  •              
  •             "pv-speed ml"> 
  •               "pv-spnum">1x

     
  •               "selectList"> 
  •                 
  • 0.5x
    •  
  •                 
  • 1x
    •  
  •                 
  • 1.25x
    •  
  •                 
  • 1.5x
    •  
  •                 
  • 2x
    •  
  •                
  •              
  •             "pv-screen ml"> 
  •               "iconfont icon-quanping"> 
  •               "iconfont icon-huanyuan hide"> 
  •              
  •            
  •          
  •        
  •      
  •     "./js/index.js"> 
  •    
  •  
    •

     我们主要看下逻辑文件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类

    vp.js：class类逻辑文件。

    1.  
    2. "en"> 
    3.    
    4.     "UTF-8" /> 
    5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    6.     VamVideo(Class类版) 
    7.     "stylesheet" href="./css/iconfont/iconfont.css" /> 
    8.     "stylesheet" href="./css/index.css" /> 
    9.    
    10.    
    11.     "video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> 
    12.       "video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"> 
    13.       "bottom-tool"> 
    14.         "pv-bar"> 
    15.           "pv-played">
     
  •           "pv-dot" onmousedown="vp.useTime()">
    •  
  •         
    •  
  •         "pv-controls" onmouseleave="vp.selectListHide()"> 
  •           "pc-con-l"> 
  •             "play-btn" onclick="vp.usePlay()"> 
  •               "iconfont icon-bofang"> 
  •               "iconfont icon-zanting hide"> 
  •              
  •             "pv-time"> 
  •               "pv-currentTime">00:00:00 
  •               / 
  •               "pv-duration">00:00:00 
  •              
  •            
  •           "pc-con-r"> 
  •             "pv-listen ml"> 
  •               "pv-yl"> 
  •                 "pv-ol" onmousedown="vp.useListen()">

     
  •                 "pv-bg">

     
  •                
  •               "pv-iconyl" onclick="vp.useVolume()"> 
  •                 "iconfont icon-yinliang"> 
  •                 "iconfont icon-jingyin hide"> 
  •                
  •              
  •             "pv-speed ml"> 
  •               "pv-spnum" onmouseover="vp.selectListShow()">1x

     
  •               "selectList" onclick="vp.useSpnum()"> 
  •                 
  • 0.5x
    •  
  •                 
  • 1x
    •  
  •                 
  • 1.25x
    •  
  •                 
  • 1.5x
    •  
  •                 
  • 2x
    •  
  •                
  •              
  •             "pv-screen ml" onclick="vp.fullScreen()"> 
  •               "iconfont icon-quanping"> 
  •               "iconfont icon-huanyuan hide"> 
  •              
  •            
  •          
  •        
  •      
  •     "./js/vp.js"> 
  •      
  •    
  •  
    •
     看到上面的代码，已经发现我们可以配置视频播放器了，那么这个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. } 

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

    三、模板字符串

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

    1.  
    2. "en"> 
    3.    
    4.     "UTF-8" /> 
    5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    6.     VamVideo(模板字符版) 
    7.     "stylesheet" href="./css/iconfont/iconfont.css" /> 
    8.     "stylesheet" href="./css/index.css" /> 
    9.    
    10.    
    11.     -- 挂载点 --> 
    12.     "app"> 
    13.  
    14.     "./js/strvp.js"> 
    15.     "./js/vp.js"> 
    16.      
    17.    
    18.  

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

    1. const strHtml = ` 
    2. "video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> 
    3.       "video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"> 
    4.       "bottom-tool"> 
    5.         "pv-bar"> 
    6.           "pv-played"> 
    7.           "pv-dot" onmousedown="vp.useTime()"> 
    8.          
    9.         "pv-controls" onmouseleave="vp.selectListHide()"> 
    10.           "pc-con-l"> 
    11.             "play-btn" onclick="vp.usePlay()"> 
    12.               "iconfont icon-bofang"> 
    13.               "iconfont icon-zanting hide"> 
    14.              
    15.             "pv-time"> 
    16.               "pv-currentTime">00:00:00 
    17.               / 
    18.               "pv-duration">00:00:00 
    19.              
    20.            
    21.           "pc-con-r"> 
    22.             "pv-listen ml"> 
    23.               "pv-yl"> 
    24.                 "pv-ol" onmousedown="vp.useListen()">
       
    25.                 "pv-bg">
       
    26.                
    27.               "pv-iconyl" onclick="vp.useVolume()"> 
    28.                 "iconfont icon-yinliang"> 
    29.                 "iconfont icon-jingyin hide"> 
    30.                
    31.              
    32.             "pv-speed ml"> 
    33.               "pv-spnum" onmouseover="vp.selectListShow()">1x
       
    34.               "selectList" onclick="vp.useSpnum()"> 
    35.                 
    36. 0.5x
      37.  
    37.                 
    38. 1x
      39.  
    39.                 
    40. 1.25x
      41.  
    41.                 
    42. 1.5x
      43.  
    43.                 
    44. 2x
      45.  
    45.                
    46.              
    47.             "pv-screen ml" onclick="vp.fullScreen()"> 
    48.               "iconfont icon-quanping"> 
    49.               "iconfont icon-huanyuan hide"> 
    50.              
    51.            
    52.          
    53.        
    54.      
    55. `; 

    我们再进一步，使用Vue.js、React.js分别实现一波。

    四、Vue.js

    vue@2.6.12：引入Vue.js，这里我们使用@2.6.12。

    1.  
    2. "en"> 
    3.    
    4.     "UTF-8" /> 
    5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    6.     VamVideo(Vue.js版) 
    7.     "stylesheet" href="./css/iconfont/iconfont.css" /> 
    8.     "stylesheet" href="./css/index.css" /> 
    9.    
    10.    
    11.     "app"> 
    12.        
    13.      
    14.     "https://cdn.jsdelivr.net/npm/vue@2.6.12"> 
    15.     "./js/vp.js"> 
    16.      
    17.    
    18.  

     从上面的代码中可以看到，可以直接在全局实例化一个对象，可以根据自己的需要进行配置。

    五、React.js

    react.development.js - React 的核心库。

    react-dom.development - 提供与 DOM 相关的功能。

    babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

    1.  
    2. "en"> 
    3.    
    4.     "UTF-8" /> 
    5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    6.     VamVideo(React.js版) 
    7.     "stylesheet" href="./css/iconfont/iconfont.css" /> 
    8.     "stylesheet" href="./css/index.css" /> 
    9.     "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"> 
    10.     "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"> 
    11.     "https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"> 
    12.    
    13.    
    14.     "app"> 
    15.     "./js/vp.js"> 
    16.     "text/babel"> 
    17.       class VamVideoPlayer extends React.Component { 
    18.         constructor(props) { 
    19.           super(props); 
    20.           this.vper = null; 
    21.         } 
    22.         vp(v) { 
    23.           this.vper = v; 
    24.         } 
    25.         componentDidMount() { 
    26.           let vps = new VamVideo( 
    27.             document.querySelector(".video-box"), // 挂载父节点 
    28.             { 
    29.               // 视频属性 
    30.               poster: "./img/bg.png", 
    31.               src: 
    32.                 "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
    33.               preload: "auto", 
    34.               // loop:"loop", 
    35.               // autoplay:"autoplay" 
    36.             }, 
    37.             { 
    38.               // 视频样式 
    39.               width: "1200px", 
    40.               height: "600px", 
    41.             } 
    42.           ); 
    43.           this.vp(vps); 
    44.         } 
    45.         render() { 
    46.           return ( 
    47.             
    48.               className="video-box" 
    49.               onMouseEnter={() => this.vper.bottomTup()} 
    50.               onMouseLeave={() => this.vper.bottomTdow()} 
    51.             > 
    52.               
    53.                 className="video-player" 
    54.                 onCanPlay={() => this.vper.useOnplay()} 
    55.                 onEnded={() => this.vper.useEnd()} 
    56.               > 
    57.               "bottom-tool"> 
    58.                 "pv-bar"> 
    59.                   "pv-played"> 
    60.                   
    61.                     className="pv-dot" 
    62.                     onMouseDown={(e) => this.vper.useTime(e)} 
    63.                   > 
    64.                  
    65.                 
    66.                   className="pv-controls" 
    67.                   onMouseLeave={() => this.vper.selectListHide()} 
    68.                 > 
    69.                   "pc-con-l"> 
    70.                     
    71.                       className="play-btn" 
    72.                       onClick={() => this.vper.usePlay()} 
    73.                     > 
    74.                       "iconfont icon-bofang"> 
    75.                       "iconfont icon-zanting hide"> 
    76.                      
    77.                     "pv-time"> 
    78.                       "pv-currentTime">00:00:00 
    79.                       / 
    80.                       "pv-duration">00:00:00 
    81.                      
    82.                    
    83.                   "pc-con-r"> 
    84.                     "pv-listen ml"> 
    85.                       "pv-yl"> 
    86.                         
    87.                           className="pv-ol" 
    88.                           onMouseDown={(e) => this.vper.useListen(e)} 
    89.                         >
       
    90.                         "pv-bg">
       
    91.                        
    92.                       
    93.                         className="pv-iconyl" 
    94.                         onClick={() => this.vper.useVolume()} 
    95.                       > 
    96.                         "iconfont icon-yinliang"> 
    97.                         "iconfont icon-jingyin hide"> 
    98.                        
    99.                      
    100.                     "pv-speed ml"> 
    101.                       
    102.                         className="pv-spnum" 
    103.                         onMouseOver={(e) => this.vper.selectListShow(e)} 
    104.                       > 
    105.                         1x 
    106.                       
       
    107.                       
    108.                         className="selectList" 
    109.                         onClick={(e) => this.vper.useSpnum(e)} 
    110.                       > 
    111.                         
    112. 0.5x
      113.  
    113.                         
    114. 1x
      115.  
    115.                         
    116. 1.25x
      117.  
    117.                         
    118. 1.5x
      119.  
    119.                         
    120. 2x
      121.  
    121.                        
    122.                      
    123.                     
    124.                       className="pv-screen ml" 
    125.                       onClick={() => this.vper.fullScreen()} 
    126.                     > 
    127.                       "iconfont icon-quanping"> 
    128.                       "iconfont icon-huanyuan hide"> 
    129.                      
    130.                    
    131.                  
    132.                
    133.              
    134.           ); 
    135.         } 
    136.       } 
    137.  
    138.       ReactDOM.render(, document.getElementById("app")); 
    139.      
    140.    
    141.  
     上面React版本可能有点老，但是逻辑不会变。大家可以使用最新版本或者脚手架来开发一个视频播放器组件，这样一切都是自己说了算。

    结语

    到这里，我们使用五种方法来实践一个自定义配置视频播放器。梦想就这么简单地实现了!你可以查看完整源码到我的github上，地址在这https://github.com/maomincoding/vamPlayer。

    项目中主要难点在于拖拽那块，大家可以先自己尝试着去理解，我将会在下一篇主要讲述本项目所遇到的一些问题以及解决方法。

     

    来源： 前端历劫之路内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

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

    后端开发JavaScript视频播放器2024-12-03

    如何用JavaScript开发一款自定义配置视频播放器

    后端开发2024-04-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯