The VideoJs player framework is the project built by the community, which can handle the most professional use cases and is used on thousands of video websites. An open source library for working with video on the web with dozens available plugins makes Videojs most advanced and most popular HTML5 player today.

Built on our own solid framework, filled with a range of custom components and features.

It's a set of advanced features, plugins and dedicated skins not available anywhere else.


0% played
Tricking: 0 eventTag

Creating a player

Include the Video.js Javascript, Greensock library and CSS files in the head of your page.

Step 1: You can download the Video.js source and host it on your own servers, or use the free CDN hosted version.


										<!-- Greensock library -->
<script type="text/javascript" src="//"></script>
<!-- jQuery library-->
<script src="//"></script>
<!-- Vjs library -->
<link href="//" rel="stylesheet"></link>
<script src="//"></script>
<!-- Custom library-->
<script src="MZvideoPlayer.min.js"></script>

Add an HTML5 video tag to your page.

Step 2: All attibutes automaticaly will be setup as soon main page is ready, and read all pre-defined attributes (see options below). There are other methods for initializing the player, but this is the easiest.


										<!-- Main container (parentDiv) -->
<div id="YourCustomName"></div>

Script setup

Step 3: It's best to declare variables when you first use them to ensure that they are always initialized to some valid value and that their intended use is always apparent.


										/*Declare variables*/
var player, playerSettings;

/*Use ready() to make a function available after the document is loaded:*/
/*Multiple video and custom tracking setup*/
 var videoItems = [
   name: 'Video 1',
   mp4: '../videos/videoFile1.mp4',
   ogg: '../videos/videoFile1.ogv',
   tracking: {'0%': 1, '25%': 2, '50%': 3, '75%': 4, '98%': 5}
   name: 'Video 2',
   mp4: '../videos/videoFile2.mp4',
   ogg: '../videos/videoFile2.ogv',
   tracking: {'0%': 6, '25%': 7, '50%': 8, '75%': 9, '98%': 10}

/*Trigger attributes*/
 playerSettings = {
   'videoItems': videoItems,
   'size': {width:320, height:180},
   'allowFullscreen': true, /*false will disable full screen on desktop and tablet, also it will block play button on desktop*/
   'autoplay': false,
   'autoplayTimer': 0,/*stop video after x sec*/
   'mobile': false, /*play video full screen*/
   'controls': true,
   'poster': '/images/poster.jpg',
   'bigPlayBtn': '/images/big-play.png',
   'playBtn': '/images/playpause.png',
   'muteBtn': '/images/mute.png',
   'trackingCallback': trackingHandler

player = new MZ.VideoPlayer(playerSettings);


General Usage

Step 4: After an instance has been created it can be accessed globally in multple ways:

										/*Play video*/;
/*Switch video*/
/*..on video ended*/
player.on('ended', function(){//player.switchVideo(0) })
/*Track current time*/
player.on('timeupdate', function(){player.currentTime(); })
/*Player duration*/
player.on('timeupdate', function(){player.duration(); })
/*..on video paused*/
player.on('pause', function(){//console.log('pause') })
/*Video muted*/
$( ".muteBtn" ).one( "click", function(){//console.log('mute') });
/*Play full screen*/
/*Tracking handler*/
function trackingHandler(e){
  // console.log(e.percent);
  // console.log(e.eventTag);
  // console.log(e.videoName);
  // console.log(e.videoId);

Just drop me a line! If you still haven't found what you're looking for?