Blog Detail


A Light weight Video Player Component For Your Vue js Apps cover image

arrow_back A Light weight Video Player Component For Your Vue js Apps

Core Player comes up with an awesome Vue js video player component called vue-core-video-player. It is a lightweight Video Player and very easy to use. You can see its example here.


You can install this component via Npm or Yarn.


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


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


Anyway, you could use the CDN bundle or use the AMD loader to load the bundle.

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


Next, Edit your main.js and import the module.

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


Then, You’ve to 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>

Basic Configuration

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 the 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 resolutions of the same video source; Our default resolution is 720p;

And you must set two keys (resolution, src) of your array item.

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

If you want to play different file types in different browsers. 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 specified video file.


controls is set for player bottom dashboard.


  • fixed indicates the bottom dashboard is still visible to users.
  • auto indicates the bottom dashboard will hide when there is no interaction between user and player.


  • false indicates that player will hide the bottom dashboard
  • true indicates that player will show the bottom dashboard and work like the ‘auto’ value above;


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

There are also Video Playback control and many other options available in this component, If you want to explore more, You can visit its documentation on Github.

Published at : 16-12-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project