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…