如何用JavaScript開發一款自定義配置視頻播放器，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
前言
這幾天抽空就一直在搞一個自定義視頻播放器，為什么會有如此想法?是因為之前看一些學習視頻網站時，看到它們做的視頻播放器非常Nice!于是，就打算抽空開發一款屬于自己的視頻播放器。話不多說，一起來實戰吧!
項目展示
這張圖就是我們的成品，還等什么?趕緊來實戰吧!
實戰
我會把完整源碼放在github上，歡迎來star，地址在文末。
首先，我們會使用最原生的JavaScript來實現，老大哥肯定要打頭陣啊!
一、JavaScript
1.iconfont.css：阿里字體圖標文件，你可以在上面找到很多漂亮的圖標。
2.index.css：項目樣式文件。
3.index.js：項目邏輯文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VamVideo(原生js版)</title> <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div class="video-box"> <video class="video-player" preload="auto" poster="./img/bg.png"> <source src="https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4" /> <source /> </video> <div class="bottom-tool"> <div class="pv-bar"> <div class="pv-played"></div> <div class="pv-dot"></div> </div> <div class="pv-controls"> <div class="pc-con-l"> <div class="play-btn"> <i class="iconfont icon-bofang"></i> <i class="iconfont icon-zanting hide"></i> </div> <div class="pv-time"> <span class="pv-currentTime">00:00:00</span> <span>/</span> <span class="pv-duration">00:00:00</span> </div> </div> <div class="pc-con-r"> <div class="pv-listen ml"> <div class="pv-yl"> <p class="pv-ol"></p> <p class="pv-bg"></p> </div> <div class="pv-iconyl"> <i class="iconfont icon-yinliang"></i> <i class="iconfont icon-jingyin hide"></i> </div> </div> <div class="pv-speed ml"> <p class="pv-spnum">1x</p> <ul class="selectList"> <li>0.5x</li> <li>1x</li> <li>1.25x</li> <li>1.5x</li> <li>2x</li> </ul> </div> <div class="pv-screen ml"> <i class="iconfont icon-quanping"></i> <i class="iconfont icon-huanyuan hide"></i> </div> </div> </div> </div> </div> <script src="./js/index.js"></script> </body> </html>
我們主要看下邏輯文件index.js。
let timer = null; let disX = 0; let disL = 0; function $(el) { return document.querySelector(el); } function showEl(el) { $(el).style.display = "block"; } function hideEl(el) { $(el).style.display = "none"; } function setVp(w, h) { $(".video-player").style.width = w + "px"; $(".video-player").style.height = h + "px"; $(".video-box").style.width = w + "px"; $(".video-box").style.height = h + "px"; $(".pv-bar").style.width = w + "px"; } // 時間格式化 function changeTime(iNum) { let iN = parseInt(iNum); const iH = toZero(Math.floor(iN / 3600)); const iM = toZero(Math.floor((iN % 3600) / 60)); const iS = toZero(Math.floor(iN % 60)); return iH + ":" + iM + ":" + iS; } // 整0處理 function toZero(num) { if (num <= 9) { return "0" + num; } else { return "" + num; } } // 底部控制欄 $(".video-box").onmouseenter = function () { $(".bottom-tool").style.bottom = "0px"; }; $(".video-box").onmouseleave = function () { $(".bottom-tool").style.bottom = "-45px"; }; // 倍速播放欄(顯示/隱藏) $(".pv-spnum").onmouseover = function () { showEl(".selectList"); }; $(".pv-controls").onmouseleave = function () { hideEl(".selectList"); }; // 播放/暫停 $(".play-btn").onclick = function () { if ($(".video-player").paused) { $(".video-player").play(); hideEl(".icon-bofang"); showEl(".icon-zanting"); nowTime(); timer = setInterval(nowTime, 1000); } else { $(".video-player").pause(); showEl(".icon-bofang"); hideEl(".icon-zanting"); clearInterval(timer); } }; // 總時長 $(".video-player").oncanplay = function () { $(".pv-duration").innerHTML = changeTime($(".video-player").duration); }; // 播放結束 $(".video-player").onended = function (params) { showEl(".icon-bofang"); hideEl(".icon-zanting"); }; // 播放時長 function nowTime() { $(".pv-currentTime").innerHTML = changeTime($(".video-player").currentTime); let scale = $(".video-player").currentTime / $(".video-player").duration; let w = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; $(".pv-dot").style.left = scale * w + "px"; $(".pv-played").style.width = scale * w + "px"; } // 靜音/取消靜音 $(".pv-iconyl").onclick = function () { if ($(".video-player").muted) { $(".video-player").volume = 1; hideEl(".icon-jingyin"); showEl(".icon-yinliang"); $(".video-player").muted = false; } else { $(".video-player").volume = 0; showEl(".icon-jingyin"); hideEl(".icon-yinliang"); $(".video-player").muted = true; } }; let isfullScreen = false; // 全屏 $(".pv-screen").onclick = function () { const w = document.documentElement.clientWidth || document.body.clientWidth; const h = document.documentElement.clientHeight || document.body.clientHeight; isfullScreen = !isfullScreen; if (isfullScreen) { setVp(w, h); hideEl(".icon-quanping"); showEl(".icon-huanyuan"); } else { setVp(900, 480); showEl(".icon-quanping"); hideEl(".icon-huanyuan"); } }; // 播放進度條 $(".pv-dot").onmousedown = function (ev) { let ev1 = ev || window.event; disX = ev1.clientX - $(".pv-dot").offsetLeft; document.onmousemove = function (ev) { let ev2 = ev || window.event; let L = ev2.clientX - disX; if (L < 0) { L = 0; } else if (L > $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth) { L = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; } $(".pv-dot").style.left = L + "px"; let scale = L / ($(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth); $(".video-player").currentTime = scale * $(".video-player").duration; nowTime(); }; document.onmouseup = function () { document.onmousemove = null; }; return false; }; // 音量控制 $(".pv-ol").onmousedown = function (ev) { let ev1 = ev || window.event; disL = ev1.clientX - $(".pv-ol").offsetLeft; document.onmousemove = function (ev) { let ev2 = ev || window.event; let L = ev2.clientX - disL; if (L < 0) { L = 0; } else if (L > $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth) { L = $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth; } $(".pv-ol").style.left = L + "px"; let scale = L / ($(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth); $(".pv-bg").style.width = $(".pv-ol").offsetLeft + "px"; if ($(".pv-ol").offsetLeft !== 0) { showEl(".icon-yinliang"); hideEl(".icon-jingyin"); } else { showEl(".icon-jingyin"); hideEl(".icon-yinliang"); } $(".video-player").volume = scale; }; document.onmouseup = function () { document.onmousemove = null; }; return false; }; // 播放速度 $(".selectList").onclick = function (e) { let ev = e || window.event; hideEl(".selectList"); $(".pv-spnum").innerText = ev.target.innerText; const value = ev.target.innerText.replace("x", ""); $(".video-player").playbackRate = value; };這樣寫是可以實現一個視頻播放器，你可以通過改樣式文件還有部分邏輯文件來實現一個自定義配置視頻播放器，但是這種效果不太好，所以我們將通過使用Es6中的Class類來重寫這個自定義配置視頻播放器。
二、Class類
1.vp.js：class類邏輯文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VamVideo(Class類版)</title> <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div class="video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> <video class="video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"></video> <div class="bottom-tool"> <div class="pv-bar"> <div class="pv-played"></div> <div class="pv-dot" onmousedown="vp.useTime()"></div> </div> <div class="pv-controls" onmouseleave="vp.selectListHide()"> <div class="pc-con-l"> <div class="play-btn" onclick="vp.usePlay()"> <i class="iconfont icon-bofang"></i> <i class="iconfont icon-zanting hide"></i> </div> <div class="pv-time"> <span class="pv-currentTime">00:00:00</span> <span>/</span> <span class="pv-duration">00:00:00</span> </div> </div> <div class="pc-con-r"> <div class="pv-listen ml"> <div class="pv-yl"> <p class="pv-ol" onmousedown="vp.useListen()"></p> <p class="pv-bg"></p> </div> <div class="pv-iconyl" onclick="vp.useVolume()"> <i class="iconfont icon-yinliang"></i> <i class="iconfont icon-jingyin hide"></i> </div> </div> <div class="pv-speed ml"> <p class="pv-spnum" onmouseover="vp.selectListShow()">1x</p> <ul class="selectList" onclick="vp.useSpnum()"> <li>0.5x</li> <li>1x</li> <li>1.25x</li> <li>1.5x</li> <li>2x</li> </ul> </div> <div class="pv-screen ml" onclick="vp.fullScreen()"> <i class="iconfont icon-quanping"></i> <i class="iconfont icon-huanyuan hide"></i> </div> </div> </div> </div> </div> <script src="./js/vp.js"></script> <script> const vp = new VamVideo( document.querySelector(".video-box"), // 掛載父節點 { // 視頻屬性 poster:"./img/bg.png", src:"https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", preload:"auto", // loop:"loop", // autoplay:"autoplay" }, { // 視頻樣式 width:"1200px", height:"600px" } ); </script> </body> </html>看到上面的代碼，已經發現我們可以配置視頻播放器了，那么這個vp.js到底是何方神圣呢?我們來看下。
class VamVideo { constructor(vp, attrObj, styleObj) { this.timer = null; this.disX = 0; this.disL = 0; this.isfullScreen = false; for (const key in attrObj) { if (Object.hasOwnProperty.call(attrObj, key)) { this.$(".video-player").setAttribute(key, attrObj[key]); } } for (const key in styleObj) { if (Object.hasOwnProperty.call(styleObj, key)) { this.$(".video-box").style[`${key}`] = styleObj[key]; key === "width" ? (this.vbw = styleObj.width) : (this.vbw = vp.offsetWidth); key === "height" ? (this.vbh = styleObj.height) : (this.vbh = vp.offsetHeight); } } } $ = (el) => document.querySelector(el); showEl = (el) => { this.$(el).style.display = "block"; }; hideEl = (el) => { this.$(el).style.display = "none"; }; setVp = (w, h) => { const _w = String(w).indexOf("px") != -1 ? w : w + "px"; const _h = String(h).indexOf("px") != -1 ? h : h + "px"; this.$(".video-player").style.width = _w; this.$(".video-player").style.height = _h; this.$(".video-box").style.width = _w; this.$(".video-box").style.height = _h; this.$(".pv-bar").style.width = _w; }; nowTime = () => { this.$(".pv-currentTime").innerHTML = this.changeTime( this.$(".video-player").currentTime ); let scale = this.$(".video-player").currentTime / this.$(".video-player").duration; let w = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth; this.$(".pv-dot").style.left = scale * w + "px"; this.$(".pv-played").style.width = scale * w + "px"; }; changeTime = (iNum) => { let iN = parseInt(iNum); const iH = this.toZero(Math.floor(iN / 3600)); const iM = this.toZero(Math.floor((iN % 3600) / 60)); const iS = this.toZero(Math.floor(iN % 60)); return iH + ":" + iM + ":" + iS; }; toZero = (num) => { if (num <= 9) { return "0" + num; } else { return "" + num; } }; // 底部控制欄(顯示/隱藏) bottomTup = () => { this.$(".bottom-tool").style.bottom = "0px"; }; bottomTdow = () => { this.$(".bottom-tool").style.bottom = "-45px"; }; // 倍速播放欄(顯示/隱藏) selectListShow = () => { this.showEl(".selectList"); }; selectListHide = () => { this.hideEl(".selectList"); }; // 播放/暫停 usePlay = () => { if (this.$(".video-player").paused) { this.$(".video-player").play(); this.hideEl(".icon-bofang"); this.showEl(".icon-zanting"); this.nowTime(); this.timer = setInterval(this.nowTime, 1000); } else { this.$(".video-player").pause(); this.showEl(".icon-bofang"); this.hideEl(".icon-zanting"); clearInterval(this.timer); } }; // 總時長 useOnplay = () => { this.$(".pv-duration").innerHTML = this.changeTime( this.$(".video-player").duration ); }; // 播放結束 useEnd = () => { this.showEl(".icon-bofang"); this.hideEl(".icon-zanting"); }; // 靜音 useVolume = () => { if (this.$(".video-player").muted) { this.$(".video-player").volume = 1; this.hideEl(".icon-jingyin"); this.showEl(".icon-yinliang"); this.$(".video-player").muted = false; } else { this.$(".video-player").volume = 0; this.showEl(".icon-jingyin"); this.hideEl(".icon-yinliang"); this.$(".video-player").muted = true; } }; // 全屏 fullScreen = () => { const w = document.documentElement.clientWidth || document.body.clientWidth; const h = document.documentElement.clientHeight || document.body.clientHeight; this.isfullScreen = !this.isfullScreen; if (this.isfullScreen) { this.setVp(w, h); this.hideEl(".icon-quanping"); this.showEl(".icon-huanyuan"); } else { console.log("w" + this.vbw, "h" + this.vbh); this.setVp(this.vbw, this.vbh); this.showEl(".icon-quanping"); this.hideEl(".icon-huanyuan"); } }; // 播放進度條 useTime = (ev) => { let ev1 = ev || window.event; this.disX = ev1.clientX - this.$(".pv-dot").offsetLeft; document.onmousemove = (ev) => { let ev2 = ev || window.event; let L = ev2.clientX - this.disX; if (L < 0) { L = 0; } else if ( L > this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth ) { L = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth; } this.$(".pv-dot").style.left = L + "px"; let scale = L / (this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth); this.$(".video-player").currentTime = scale * this.$(".video-player").duration; this.nowTime(); }; document.onmouseup = function () { document.onmousemove = null; }; return false; }; // 音量控制 useListen = (ev) => { let ev1 = ev || window.event; this.disL = ev1.clientX - this.$(".pv-ol").offsetLeft; document.onmousemove = (ev) => { let ev2 = ev || window.event; let L = ev2.clientX - this.disL; if (L < 0) { L = 0; } else if ( L > this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth ) { L = this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth; } this.$(".pv-ol").style.left = L + "px"; let scale = L / (this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth); this.$(".pv-bg").style.width = this.$(".pv-ol").offsetLeft + "px"; if (this.$(".pv-ol").offsetLeft !== 0) { this.showEl(".icon-yinliang"); this.hideEl(".icon-jingyin"); } else { this.showEl(".icon-jingyin"); this.hideEl(".icon-yinliang"); } this.$(".video-player").volume = scale; }; document.onmouseup = function () { document.onmousemove = null; }; return false; }; // 播放速度 useSpnum = (e) => { let ev = e || window.event; this.hideEl(".selectList"); this.$(".pv-spnum").innerText = ev.target.innerText; const value = ev.target.innerText.replace("x", ""); this.$(".video-player").playbackRate = value; }; }這樣不僅可以自定義配置一個視頻播放器，邏輯文件中的每一個方法函數還非常的簡單明了，可以說是達到我們要求的目的了。但是我們可以更簡潔。
三、模板字符串
1.strvp.js：把標簽語句放在了模板字符串中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VamVideo(模板字符版)</title> <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <!-- 掛載點 --> <div id="app"></div> <script src="./js/strvp.js"></script> <script src="./js/vp.js"></script> <script> const node = document.querySelector("#app"); node.insertAdjacentHTML("beforeEnd", strHtml); const vp = new VamVideo( document.querySelector(".video-box"), // 掛載父節點 { // 視頻屬性 poster:"./img/bg.png", src:"https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", preload:"auto", // loop:"loop", // autoplay:"autoplay" }, { // 視頻樣式 width:"1200px", height:"600px" } ); </script> </body> </html>可以看到上面的代碼，我直接把標簽語句轉換為字符串直接掛載到父節點上，這樣就更加簡潔了。下面的代碼就是一堆標簽語句。
const strHtml = ` <div class="video-box" onmouseenter="vp.bottomTup()" onmouseleave="vp.bottomTdow()"> <video class="video-player" oncanplay="vp.useOnplay()" onended="vp.useEnd()"></video> <div class="bottom-tool"> <div class="pv-bar"> <div class="pv-played"></div> <div class="pv-dot" onmousedown="vp.useTime()"></div> </div> <div class="pv-controls" onmouseleave="vp.selectListHide()"> <div class="pc-con-l"> <div class="play-btn" onclick="vp.usePlay()"> <i class="iconfont icon-bofang"></i> <i class="iconfont icon-zanting hide"></i> </div> <div class="pv-time"> <span class="pv-currentTime">00:00:00</span> <span>/</span> <span class="pv-duration">00:00:00</span> </div> </div> <div class="pc-con-r"> <div class="pv-listen ml"> <div class="pv-yl"> <p class="pv-ol" onmousedown="vp.useListen()"></p> <p class="pv-bg"></p> </div> <div class="pv-iconyl" onclick="vp.useVolume()"> <i class="iconfont icon-yinliang"></i> <i class="iconfont icon-jingyin hide"></i> </div> </div> <div class="pv-speed ml"> <p class="pv-spnum" onmouseover="vp.selectListShow()">1x</p> <ul class="selectList" onclick="vp.useSpnum()"> <li>0.5x</li> <li>1x</li> <li>1.25x</li> <li>1.5x</li> <li>2x</li> </ul> </div> <div class="pv-screen ml" onclick="vp.fullScreen()"> <i class="iconfont icon-quanping"></i> <i class="iconfont icon-huanyuan hide"></i> </div> </div> </div> </div> </div> `;
我們再進一步，使用Vue.js、React.js分別實現一波。
四、Vue.js
1.vue@2.6.12：引入Vue.js，這里我們使用@2.6.12。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VamVideo(Vue.js版)</title> <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div id="app"> <vam-video></vam-video> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="./js/vp.js"></script> <script> Vue.component("vam-video", { template: ` <div class="video-box" @mouseenter="vp.bottomTup()" @mouseleave="vp.bottomTdow()"> <video class="video-player" @canplay="vp.useOnplay()" @ended="vp.useEnd()"></video> <div class="bottom-tool"> <div class="pv-bar"> <div class="pv-played"></div> <div class="pv-dot" @mousedown="vp.useTime()"></div> </div> <div class="pv-controls" @mouseleave="vp.selectListHide()"> <div class="pc-con-l"> <div class="play-btn" @click="vp.usePlay()"> <i class="iconfont icon-bofang"></i> <i class="iconfont icon-zanting hide"></i> </div> <div class="pv-time"> <span class="pv-currentTime">00:00:00</span> <span>/</span> <span class="pv-duration">00:00:00</span> </div> </div> <div class="pc-con-r"> <div class="pv-listen ml"> <div class="pv-yl"> <p class="pv-ol" @mousedown="vp.useListen()"></p> <p class="pv-bg"></p> </div> <div class="pv-iconyl" @click="vp.useVolume()"> <i class="iconfont icon-yinliang"></i> <i class="iconfont icon-jingyin hide"></i> </div> </div> <div class="pv-speed ml"> <p class="pv-spnum" @mouseover="vp.selectListShow()">1x</p> <ul class="selectList" @click="vp.useSpnum()"> <li>0.5x</li> <li>1x</li> <li>1.25x</li> <li>1.5x</li> <li>2x</li> </ul> </div> <div class="pv-screen ml" @click="vp.fullScreen()"> <i class="iconfont icon-quanping"></i> <i class="iconfont icon-huanyuan hide"></i> </div> </div> </div> </div> </div> `, }); const vm = new Vue({ el: "#app", }); const vp = new VamVideo( document.querySelector(".video-box"), // 掛載父節點 { // 視頻屬性 poster: "./img/bg.png", src: "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", preload: "auto", // loop:"loop", // autoplay:"autoplay" }, { // 視頻樣式 width: "1200px", height: "600px", } ); </script> </body> </html>從上面的代碼中可以看到，可以直接在全局實例化一個對象，可以根據自己的需要進行配置。
五、React.js
1.react.development.js - React 的核心庫。
2.react-dom.development - 提供與 DOM 相關的功能。
3.babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VamVideo(React.js版)</title> <link rel="stylesheet" href="./css/iconfont/iconfont.css" /> <link rel="stylesheet" href="./css/index.css" /> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script src="./js/vp.js"></script> <script type="text/babel"> class VamVideoPlayer extends React.Component { constructor(props) { super(props); this.vper = null; } vp(v) { this.vper = v; } componentDidMount() { let vps = new VamVideo( document.querySelector(".video-box"), // 掛載父節點 { // 視頻屬性 poster: "./img/bg.png", src: "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", preload: "auto", // loop:"loop", // autoplay:"autoplay" }, { // 視頻樣式 width: "1200px", height: "600px", } ); this.vp(vps); } render() { return ( <div className="video-box" onMouseEnter={() => this.vper.bottomTup()} onMouseLeave={() => this.vper.bottomTdow()} > <video className="video-player" onCanPlay={() => this.vper.useOnplay()} onEnded={() => this.vper.useEnd()} ></video> <div className="bottom-tool"> <div className="pv-bar"> <div className="pv-played"></div> <div className="pv-dot" onMouseDown={(e) => this.vper.useTime(e)} ></div> </div> <div className="pv-controls" onMouseLeave={() => this.vper.selectListHide()} > <div className="pc-con-l"> <div className="play-btn" onClick={() => this.vper.usePlay()} > <i className="iconfont icon-bofang"></i> <i className="iconfont icon-zanting hide"></i> </div> <div className="pv-time"> <span className="pv-currentTime">00:00:00</span> <span>/</span> <span className="pv-duration">00:00:00</span> </div> </div> <div className="pc-con-r"> <div className="pv-listen ml"> <div className="pv-yl"> <p className="pv-ol" onMouseDown={(e) => this.vper.useListen(e)} ></p> <p className="pv-bg"></p> </div> <div className="pv-iconyl" onClick={() => this.vper.useVolume()} > <i className="iconfont icon-yinliang"></i> <i className="iconfont icon-jingyin hide"></i> </div> </div> <div className="pv-speed ml"> <p className="pv-spnum" onMouseOver={(e) => this.vper.selectListShow(e)} > 1x </p> <ul className="selectList" onClick={(e) => this.vper.useSpnum(e)} > <li>0.5x</li> <li>1x</li> <li>1.25x</li> <li>1.5x</li> <li>2x</li> </ul> </div> <div className="pv-screen ml" onClick={() => this.vper.fullScreen()} > <i className="iconfont icon-quanping"></i> <i className="iconfont icon-huanyuan hide"></i> </div> </div> </div> </div> </div> ); } } ReactDOM.render(<VamVideoPlayer />, document.getElementById("app")); </script> </body> </html>上面React版本可能有點老，但是邏輯不會變。大家可以使用最新版本或者腳手架來開發一個視頻播放器組件，這樣一切都是自己說了算。
到這里，我們使用五種方法來實踐一個自定義配置視頻播放器。
關于如何用JavaScript開發一款自定義配置視頻播放器問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
