“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hello, everyone! I’m big brother from the front End Lab!

Today, I recommend you a very good video playback component

Effect of appreciation

introduce

Vue-corevideoplayer is a lightweight video player plug-in based on vue.js. Using Adobd XD UI design, support mobile adaptation, not only powerful, appearance level is super first-class!

Vue-core VideoPlayer documentation and sample are very complete, very easy to get started.

The component also remains and nativeHTML VideoThe docking of property configuration is highly customizable.

The UI design of the player is based on Adobe XD. Adobe XD-based UI design source files are also available for developers and designers to create custom player UIs.

features

  • Support personalized configuration, you can customize the player theme interface
  • Supports I18N (internationalization), and supports Chinese, English and Japanese by default
  • Support for server-side rendering
  • Support picture in picture mode
  • Support event subscription
  • Excellent API design, easy to develop
  • Mobile adaptation
  • provideplaycore-hlsDecoding plug-in, support HLS live stream format playback

Quick learning

1. Download dependencies

The use of NPM

$ npm install --save vue-core-video-player 
Copy the code

The use of yarn

$ yarn add -S vue-core-video-player 
Copy the code

Directly introducing

<script src="./dist/vue-core-vide-player.umd.min.js"></script>
Copy the code

2. Introduce modules

Edit main.js and import the module

import VueCoreVideoPlayer from 'vue-core-video-player'

Vue.use(VueCoreVideoPlayer)
Copy the code

3. Use the playback component

<div id="app">
 <div class="player-container">
  <vue-core-video-player  :src="videoSource" :cover="cover" :title= "title"  autoplay loop="true"/>
 </div>
</div>
Copy the code

The VueCoreVideoPlayer component is still connected to the native HTML Video property configuration. You can see that the autoplay and loop properties are used here. The other properties are also used in the same way

Such a simple player has been integrated ~

4. Basic configuration

Set the video source. Here, Brother Sample uses multi-resolution as the effect display.

<script> export default { name: 'app', data() { return { videoSource: [{ src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4', resolution: 360, }, { src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4', resolution: 720, }, { src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4', resolution: 1080}], cover: "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png", the title: "your name"}}} < / script >Copy the code

If using the relative address of a video file or your CDN address:

<vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>
Copy the code

5. Event subscriptions

VueCoreVideoPlayer follows the W3C standard media event API. You can go to MDN to get these details. Some of the most common events are listed below:

  • Play indicates when the player starts playing or resumes from a suspended state with the play() method.
  • Pause Triggered when the player stops playing.
  • Progress While the player is downloading media resources.
  • Loadeddata is triggered when the player starts loading the first frame.
  • Canplay is triggered when enough data is loaded to satisfy basic playback.
  • Durationchange When a medium retrieves data and parses the metadata information completely.
  • Ended Triggered when a media play ends.
  • Timeupdate Emitted when currentTime of the playing media has changed.
  • Seeked is triggered when the user completes the seek action.
methods: { paly() { console.log("play"); }, pause(){ console.log("pause"); }}Copy the code

As an excellent modern video player component, don’t forget that Vue Cree VideoPlayer also supports I18N (internationalization), which supports Chinese, English and Japanese by default; At the same time also provides a HLS decoding plug-in Playcore-HLS support HLS playback, more functions and use you can go to practice!

VueCoreVideoPlayer has been open source on Github. At the same time, brother Has uploaded the code of Sample to Github. You can reply to the player on the background of the official account to get relevant learning resources

Through the front door, there was a family

Original is not easy, praise, message, share is big brother to write down the power!