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

Features

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

Installation

Npm

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

Yarn

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

CDN

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'

Vue.use(VueCoreVideoPlayer)

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>

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="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"></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 (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 type in different browser. 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 specify video file.

Controls

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

Autoplay

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.

Props	Type	Example	Description
volume	number	0.5	the volume of video (0-1)
muted	boolean	true	if set true, the video will be muted
cover	string	'./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.
title	string	'your title'	it will show the title of video for better SEO
logo	string	'./logo.png'	it will show the your logo of the player
loop	boolean	true	it will automatically seek back to the start upon reaching the end of the video
preload	string	'metadata'	'none' means not preload video source; 'metadata' indicates that only video metadata (e.g. length) is fetched