Shulou(Shulou.com)06/03 Report--

How to use JavaScript to develop a custom configuration video player, for this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Preface

I have been working on a custom video player these days. Why do you have such an idea? Because when I watched some learning video websites before, I saw that the video players they made were very Nice! Therefore, I plan to take the time to develop a video player of my own. Don't say much, let's fight together!

Project presentation

This picture is our finished product. What are you waiting for? Hurry up and come to actual combat!

Actual combat

I will put the complete source code on github, welcome to star, the address is at the end of the article.

First of all, we will use the most native JavaScript to achieve, Big Brother will definitely take the lead!

1. JavaScript

1.iconfont.css: Ali font icon file, you can find many beautiful icons on it.

2.index.css: project style file.

3.index.js: project logic file.

VamVideo (native js version) 00:00:00 / 00:00:00

1x

0.5x 1x 1.25x 1.5x 2x

Let's mainly look at the logical file 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";} / / time format function changeTime (iNum) {let iN = parseInt (iNum); const iH = toZero (iN / 3600); const iM = toZero (Math.floor (iN% 3600) / 60)) Const iS = toZero (Math.floor (iN% 60)); return iH + ":" + iM + ":" + iS;} / / whole 0 processing function toZero (num) {if (num $(".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 }; / / Volume control $(".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)

$(".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) 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;}; / / playback speed $(".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;}

You can implement a custom configuration video player by changing the style file and some logic files, but this effect is not very good, so we will rewrite this custom configuration video player by using the Class class in Es6.

Class 2. Class

1.vp.js:class class logic file.

VamVideo (Class class version)

1x

Const vp = new VamVideo (document.querySelector (".video-box"), / / Mount parent node {/ / video attribute 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"}, {/ / Video style width: "1200px", height: "600px"})

Looking at the above code, we have found that we can configure the video player, so who is this vp.js? Let's take a look.

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") [xss_clean] = this.changeTime (".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 {this.$ (".bottom-tool"). Style.bottom = "0px";}; bottomTdow = () = > {this.$ (".bottom-tool"). Style.bottom = "- 45px";} / / double speed playbar (show / hide) selectListShow = () = > {this.showEl (".selectList");}; selectListHide = () = > {this.hideEl (".selectList");}; / / play / pause 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);}} / / Total duration useOnplay = () = > {this.$ (".PV-duration") [xss_clean] = this.changeTime (this.$ (".video-player") .duration);}; / / end of playback useEnd = () = > {this.showEl (".icon-bofang"); this.hideEl (".icon-zanting");} / / mute 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;}}; / / full screen 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") }}; / / playback progress bar 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)

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;} / / Volume Control 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)

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;} / / playback speed 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;};}

In this way, we can not only customize the configuration of a video player, each method function in the logic file is also very simple and clear, it can be said to achieve our desired purpose. But we can be more concise.

III. Template string

1.strvp.js: put the tag statement in the template string.

VamVideo (template character version) const node = document.querySelector ("# app"); node.insertAdjacentHTML ("beforeEnd", strHtml) Const vp = new VamVideo (document.querySelector (".video-box"), / / Mount parent node {/ / video attribute 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"}, {/ / Video style width: "1200px", height: "600px"})

As you can see in the above code, I directly convert the tag statement into a string and mount it directly to the parent node, which makes it more concise. The following code is a bunch of label statements.

Const strHtml = `

1x

``

Let's go a step further and implement a wave using Vue.js and React.js respectively.

IV. Vue.js

1.vue@2.6.12: introduce Vue.js, where we use @ 2.6.12.

VamVideo (Vue.js version) Vue.component ("vam-video" {template: `00:00:00 / 00:00:00

1x

0.5 x 1x 1.25x 1.5x 2x `,}) Const vm = new Vue ({el: "# app",}) Const vp = new VamVideo (document.querySelector (".video-box"), / / Mount parent node {/ / video attribute 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 "} {/ / Video style width: "1200px", height: "600px",})

As you can see from the above code, you can instantiate an object directly globally and configure it according to your own needs.

5. React.js

1.react.development.js-the core library of React.

2.react-dom.development-provides DOM-related functionality.

3.babel.min.js-Babel can convert ES6 code to ES5 code so that we can execute React code on currently unsupported ES6 browsers. Babel has embedded support for JSX. By using Babel with the babel-sublime package (package), you can take the syntax rendering of source code to a whole new level.

VamVideo (React.js version) 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"), / / Mount parent node {/ / video attribute 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 "} {/ / Video style width: "1200px", height: "600px",}) This.vp (vps) } render () {return (this.vper.bottomTup ()} onMouseLeave= {() = > this.vper.bottomTdow ()} > this.vper.useOnplay ()} onEnded= {() = > this.vper.useEnd ()} > This.vper.useTime (e)} > this.vper.selectListHide ()} > this.vper.usePlay ()} > 00:00:00 / 00:00:00 This.vper.useListen (e)} >

This.vper.useVolume ()} > this.vper.selectListShow (e)} > 1x

This.vper.useSpnum (e)} > 0.5 x 1x 1.25x 1.5x 2x This.vper.fullScreen ()} >) }} ReactDOM.render (, document.getElementById ("app"))

The above React version may be a little old, but the logic will not change. You can use the latest version or scaffolding to develop a video player component, so it's up to you.

At this point, we use five ways to practice a custom configuration video player.

This is the answer to the question about how to develop a custom configured video player with JavaScript. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.