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.

Installation

You can install this component via Npm or Yarn.

Npm

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

Yarn

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

CDN

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>

Usage

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

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

Vue.use(VueCoreVideoPlayer)

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>
  </div>
</div>

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="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"></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: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
    resolution: '360p',
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    resolution: '720p',
  }, {
    src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
    resolution: '1080p'
  }
]

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

const videoSource = [
  {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm',
    type: 'video/webm',
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    type: 'video/mp4',
  }
]

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

Controls

controls is set for player bottom dashboard.

String;

• 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.

Boolean;

• 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;

Autoplay

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.