Optimize the dPlayer double speed play button and loop play button and then use dplayer in VUe2
k3u1fbpfcp/5c6ef81a08394bf59bf46c9d43396435~tplv-k3u1fbpfcp-watermark.image)
Dplayer source
- Download dplayer from github.com/DIYgod/DPla…
- Run the project code directly after installing the dependencies
- Main directory file
- The template contains mainly two files
- Video. Art is the template of the player
- Player. art is the player control bar template file – this is the main modification
- In the js file is mainly player.js defines the DPlayer class and the rest of the file is responsible for implementing the function
- Template.js defines how to manipulate dom objects and how to add or modify control buttons to modify this file – mainly the player control button bar
- Options. js initializes the configuration item file
- I18n.js internationalization changes some of the text can be adjusted here
- Setting.js defines several actions in the Settings button
- Events Defines the events for the player
- CSS uses SCSS to write file structure is also relatively clear
Modify the
- Changed the speed of copywriting in i18N to play speed. Changed the speed of brainwashing play to loop play
- The following simple changes to the playback speed and brainwashing loop button
- You can customize dplayer and use it in VUe2 by packaging the following changes into DIST and then replacing DIST under dplayer in dplayer-vue with the package file
- In player.art modify dplayer-speed to add style to controller. SCSS
// controller. SCSS adds // changes the playback speed button to the current set of playback speed style. dplayer-speed {color: #eee; font-size: 13px; line-height: 20px; float: right; display: inline-block; vertical-align: middle; white-space: nowrap; } // set the current playback speed style. Active-speed {background-color: rgba(0,255,0,0.6); & : hover {background - color: rgba (0255,0,0.6); <div class="dplayer-setting-item dplayer-setting-speed" > <span class="dplayer-label">{{ Tran ('Speed')}} {{setting}}</span> <div class="dplayer-speed">1</div> </div> // template add DOM operation node this.speed.speedNode = this.speed.querySelector('.dplayer-speed'); / / set operation node in the setting of the selected playback speed And add the active -speed style as the selected style enclosing player. The template. The speedItem [this. LastIndex]. The className = 'dplayer-setting-speed-item'; this.player.template.speedItem[i].className = 'dplayer-setting-speed-item active-speed'; this.lastIndex = i; this.player.speed(this.player.template.speedItem[i].dataset.speed); this.player.template.speed.speedNode.innerHTML = this.player.template.speedItem[i].dataset.speed;Copy the code
git
- Github.com/fx007001/dp…
Dplayer is used in VUE
- Install dplayer using NPM I dplayer – after installing dplayer, you will find that the dplayer folder is opened in node_modules using the dplayer package file
- You can copy js files from the Dist directory and use them in your component library – if you want to modify dPlayer
- Call all events provided by dPlayer using this.db
- You can also use vue-dPlayer directly if you want to modify dPlayer it is recommended to try importing dPlayer directly into your own project
git
- Github.com/fx007001/vi…