Kit HTML5 Video Player is a powerful tool to provide HTML5 Videos on your website. The player does not provide a flash fallback.
Kit HTML5 Video uses a set of external libraries. For basic usage kit requires jquery. For optimal skin optic you should also include bootstrap and fontawesome vector icons. But these libs are not required. If you don't want to use either bootstrap or fontawesome vector icons, you have to add icons to the player yourself manually.
Include Javascript and CSS files:
<script src="js/player.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/player.basic.css"/>
<link rel="stylesheet" type="text/css" href="css/player.skins.css"/> <div id="player">
<video controls>
<source ...>
</video>
</div>
<script type="text/javascript">
var p = $('#player').kit_HTML5VideoPlayer({
// optional
width : 600,
height : 480,
skin : 'yt'
});
var api = p.kit_HTML5VideoPlayer();
</script>Single Source
var clipObject = {
title : 'My Clip', // optional
src : 'video.webm',
type : 'video/webm'
}; var clipObject = {
sources : [
{ type : 'video/webm', src : 'video.webm' },
{ type : 'video/mp4', src : 'video.mp4' },
{ type : 'video/ogg', src : 'video.ogg' }
]
}; var clipObject = {
sources : [
{ type : 'video/webm', resolutions : { '240p' : 'video-240p.webm', '360p' : 'video-360p.webm' } },
{ type : 'video/mp4', resolutions : { '240p' : 'video-240p.mp4', '360p' : 'video-360p.mp4' } },
{ type : 'video/ogg', resolutions : { '240p' : 'video-240p.ogg', '360p' : 'video-360p.ogg' } }
]
}; <div id="player"><video controls></video></div>
<script type="text/javascript">
var p = $('#player').kit_HTML5VideoPlayer({
playlist = [
clipObject1, ..., clipObjectN
]
});
var api = p.kit_HTML5VideoPlayer();
</script> skin Skin of the player
yt|default|flat|bubbles
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent