ivid is an interactive HTML5 video player based on javascript, it can allow you to play video in web application easily.
Features
- 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 $ 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));
