Learn to use Vue Core Video Player

A Lightweight Video Player For Vue.js. Video player is so important for your video and Vue core video player is best for your website because of its lightweight.

Documentation Check on GitHub


  • Mobile Adaptation
  • i18n
  • Custom configuration
  • Events Subscription
  • Development friendly
  • Picture-in-Picture Mode
  • SSR



$ npm install vue-core-video-player --save


$ yarn add vue-core-video-player --save


In any way, you may either utilise the cdn bundle or load the bundle using an AMD loader.

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

Edit your main.js and import the module.

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


Write the component in your player container.

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="./your_video_source.mp4"></vue-core-video-player>

The video source

Use src property to set the video source of your player. It must be the only three types below.

  • String; It can be relative path of your video file or some cdn url.
<vue-core-video-player src=""></vue-core-video-player>
  • Array; It means you set the different resolution of the same video source such as 360p, 720p, and 1080; Default resolution is 720p;

And you must set two keys (resolutionsrc) of your array item.

const videoSource = [
    src: '',
    resolution: '360p',
  }, {
    src: '',
    resolution: '720p',
  }, {
    src: '',
    resolution: '1080p'

If you want to play different file type in different browser. You can add type property in an array;

const videoSource = [
    src: '',
    type: 'video/webm',
  }, {
    src: '',
    type: 'video/mp4',

caniuse-video-format show which browser supports the specify video file.


controls is set for player bottom dashboard.

  • String;
    • ‘fixed’ show the bottom dashboard is still visible to users.
    • ‘auto’ shows the bottom dashboard will hide when there is no interaction between the end-user and the video player.
  • Boolean;
    • false show that player will hide the bottom dashboard
    • true show that the player will show the bottom dashboard


If you set autoplay, the player will try to play video. Different browser has different policies to handle auto play action. If player failed, it will show the play button for user to touch.

Video Playback control

And it keep the same attributes of HTML Video.

volumenumber0.5the volume of video (0-1)
mutedbooleantrueif set true, the video will be muted
coverstring'./cover.png'it will show the cover of the video; If you set autoplay, the player auto play successfully, the cover property will not work.
titlestring'your title'it will show the title of video for better SEO
logostring'./logo.png'it will show the your logo of the player
loopbooleantrueit will automatically seek back to the start upon reaching the end of the video
preloadstring'metadata''none' means not preload video source; 'metadata' indicates that only video metadata (e.g. length) is fetched