Getting Started with vue-core-video-player to create video player

by Jack Pu

I have focused on the video player in the last few years. With the growth of video content and bandwidth, so many websites using video to give users more information. So I hope this vue.js plugin helps you solve it.

vue-core-video-player is a lightweight video player for Vue.js. It is easy to get started. You’ll write less code to create a stronger video player. And it is friendly for server-side rendering, so it could be easy for spiders or other bots to show your video source.

Get Started

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

You can also use yarn：

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

Then edit your main.js to import the module.

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

Vue.use(VueCoreVideoPlayer)

Thirdly, using 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 final rendering preview below:

View Demo Online

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 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 different resolution 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 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' 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. Different browser has different policies to handle auto play action. If player failed, it will show the play button for the user to touch.

Video Playback control

And it keep the same attributes of HTML Video.

  • volume: the volume of video (0-1)
  • cover: it will show the cover of the video; If you set autoplay, the player auto play successfully, the cover property will not work.
  • logo: it will show the your logo of the player

And you could read The Official Document to learn more about it.

The Future

In fact, web media player face with so many situations:

  • different video format
  • live streaming
  • 360 video
  • hevc/av1
  • mobile compatibility in diffrent browsers

So I am trying to provide the playback core for developers to extend the basic class. Then UI elements can subscribe data from events.

Hope everyone interested in the project can open a PR or discuss issues 💐 .

Github: https://github.com/core-player/vue-core-video-player
Docs: https://core-player.github.io/vue-core-video-player/