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="//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>


										<!-- jQuery library-->

										<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>


										<!-- Vjs library -->

										<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"></link>

										<script src="//vjs.zencdn.net/5.4.6/video.min.js"></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:*/

											$('document').ready(function(){

												/*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,

														  	'parentDiv':'YourCustomName',

														  	'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*/

										 player.play();

										/*Switch video*/

										 player.switchVideo(1);

										/*..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*/

										 player.requestFullscreen();

										/*Tracking handler*/

										
										function trackingHandler(e){

											 	// console.log(e.percent);

											 	// console.log(e.eventTag);

											 	// console.log(e.videoName);

											 	// console.log(e.videoId);

										};