ivid | Building an Interactive HTML5 Video Player with JavaScript

ivid is an interactive HTML5 video player based on javascript, it can allow you to play video in web application easily.

ivid - Building an Interactive HTML5 Video Player with JavaScript

AuthorLinksMade withLast update
ividjsOffice HomeJavaScriptSep 15, 2022


  • space: Play/Pause
  • m: Mute/Unmute
  • f: Fullscreen toggle
  • up/down: Volume up/down
  • right/left: Forward/backward

How to create a html5 video play using ivid?

1.Install ivid using npm


$ npm install @ividjs/ivid --save

2.Import ivid files using js

<script src="//unpkg.com/@ividjs/" type="module" async></script>

3.Import the style ivid.min.css for the HTML5 video player

<link href="//unpkg.com/@ividjs/dist/ivid.min.css" rel="stylesheet">

4.Import some icons for the player control

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

5.Create a video player using i-vido

<i-video id="ivid-example" controls autoplay playsinline></i-video>

6.Set some attributions for video files

let video1 = {

    uid: 111,

    src: "1.mp4"


let video2 = {

    uid: 222,

    src: "2.mp4"


let video3 = {

    uid: 333,

    src: "3.ogv"


let video4 = {

    uid: 444,

    src: "4.ogv"


video1.options = {

  choices: {

    [video2.uid]: 'A cat', // ... the first choice will be the default fallback

    [video3.uid]: 'A troiKat',



// The next video can be set directly

video2.options = {

  choices: { // By displaying "choices"... or forcing them through

    [video3.uid]: 'troikating...'



video3.options = {

  fallback: video2.uid // Or seamlessly


// Or setting everything up, for a better control

video4.options = {

  choices: {

    [video1.uid]: 'Meow',


  fallback: video3.uid


7.Bind video play and video files, than these files can be played.

let model = {

    [video1.uid]: video1,

    [video2.uid]: video2,

    [video3.uid]: video3,

    [video4.uid]: video4

document.getElementById("ivid-example").setAttribute("model", JSON.stringify(model));

Leave a Reply

Your email address will not be published. Required fields are marked *