Getting Started With Bolt Player

Playwire offers three different ways of embedding the Bolt Video Player. Most users will find that the Basic Embed is sufficient for their needs, but if you are a developer wanting to load the Player on a page dynamically, you may be interested in our Lazy Loading option. Additionally, if you are planning to use the Bolt Player API, please check out the Callbacks section below for important information about how to execute functions once the Player is fully loaded on the page.

Basic Embed

The basic embed requires only the single line of code provided to you on the Playwire site when you view one of your videos. This code should be placed at exactly the point on the page where you want your video to show. You can find the embed code your video, when viewing your video in the Playwire backend. Click the copy button in the embed section to copy your embed code.

Where can I find my embed code? Refer to this support article for more help embedding your videos.
!! Please note !!
Unlike other video players you may have used in the past, the code should not be placed in the <head> of your page ! Instead, place it in the <body> at the point where the video should be displayed. The embed also will not work unless hosted on a web server or local dev environment. Embed code will not work without a web server or local server environment such as MAMP or XAMPP. Additionally, <!doctype> must be declared at the top of your HTML document or you may encounter errors in Internet Explorer.

Paste this code in the <body> of your HTML document that you want the video player to appear.

			<!-- Basic embed example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / Basic embed example -->
			

Lazy Loading

Sometimes you may not want the Player to be present on your page at the moment the page loads. For situations like this, you will want to use Lazy Loading instead. At the point where you want the Player to load, use the Basic Embed code, but include this additional attribute: data-autoload="false". Additionally, make sure to specify a data-container attribute; this will let the Player know into what container it should be loaded when you choose to load it. Then execute the “renderPlayer()” code in the example to actually load the Player.

Paste this code in the <body> of your HTML document that you want the video player to appear.

			<!-- Lazy load embed example with data-autoload="false", data-id="myPlayer" --> 
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				data-autoload="false"
				data-id="myPlayer"
				type="text/javascript">
			</script>
			<!-- / Lazy load embed example -->

			
Paste this code in a <script> tag on the same page or in a linked JavaScript file.


			// All console.log() messages are only for demo purposes
			// you can remove when using on your site

			var timer = window.setInterval(checkForBolt, 1000);

			function checkForBolt(){

				console.log('%cChecking for Bolt object', 'background: yellow;');

				if( typeof Bolt !== undefined){ //

				  console.log('%cBolt Player Object Ready', 'background: green;');
				  Bolt.renderPlayer("myPlayer"); // Rendering Player with data-id of myPlayer
				  console.log('%cBolt Player Rendered', 'background: green;');
				  window.clearInterval(timer); // clear interval timer

				}

			}

			

Callbacks

If you are interested in using the Bolt Player API, you will likely want to take advantage of the data-onready attribute. data-onready allows you to specify the name of a function you want to be executed as soon as the Bolt Player is fully loaded on the page. This is a good way to ensure that you do not try to execute Bolt functions before they are available for use. In this demo, after the player is fully loaded, the myPlayerLoaded.init method will be called which will wait for the Bolt.BOLT_CONTENT_STARTED event to fire, effectively creating a link.

Paste this code in the <body> of your HTML document that you want the video player to appear.

			<!-- Callback embed example with data-id="myPlayer" and data-onready="myPlayerLoaded.init" --> 
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				data-id="myPlayer"
				data-onready="myPlayerLoaded.init"
				type="text/javascript">
			</script>
			<!-- / Callback embed example -->

			
Paste this code in a <script> tag on the same page or in a linked JavaScript file.


			// when player with data-id of "myPlayer" is fully loaded
			// call the myPlayerLoaded.init function and create a link

			var myPlayerLoaded = {

				init : function(){

					Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function(){

						var link       = document.createElement( "a" );              
						var linkText   = document.createTextNode( "Click Here" );

						link.title     = "My Link";
						link.href      = "http://www.playwire.com";
						link.target    = "_blank"
						link.className = "link-style";

						link.appendChild( linkText );
						document.getElementById( "message" ).appendChild( link ); 

						console.log( 'Content Started' );

					});

				}
			}

			

Bolt.resizeVideo( player_id , width, height )

Description: Resizes the video player to a specified dimension.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.
width Type: String
Description: A string representation of the desired width of the player. Can be set in pixels or percentages. If pixels, dimension must be followed by 'px' i.e. '640px' If percentage dimension must be followed by '%' i.e. '50%'
height Type: String
Description: A string representation of the desired height of the player. Can be set in pixels or percentages. If pixels, dimension must be followed by 'px' i.e. '640px' If percentage dimension must be followed by '%' i.e. '50%'

Usage

There may be times when you want to set the size of the video player to specific dimensions. Using the resizeVideo() method, the code snippet below resizes the video player with the data-id of myPlayer to a width of 480px and a height of 270px.


				Bolt.resizeVideo( 'myPlayer', '480px', '270px' );
			

Code Example

In this demo, the user can select a new player size from the dropdown. After selecting the new player size, the new player size will be risized using resizeVideo() method by passing the values of the dropdowns to the method.


			
			<!-- dropdown size selector -->
			<div class="form" style="margin: 25px 0;width: 360px;">
				<form role="form">
					<select class="form-control change-size" style="width: 360px;color: #000;">
						<option disabled="" selected="">Change the player size</option>
						<option data-width="480px" data-height="270px">480x270</option>
						<option data-width="640px" data-height="360px">640x360</option>
						<option data-width="853px" data-height="480px">853x480</option>
					</select>
				</form>
			</div>
			<!-- /dropdown size selector -->

			<!-- resizeVideo() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /resizeVideo() example -->

			

			
			 jQuery( document ).on( 'change', '.change-size', function(){
			      changeWidth = jQuery( this ).find( 'option:selected').attr( 'data-width' );
			      changeHeight = jQuery( this ).find( 'option:selected').attr( 'data-height' );
			      Bolt.resizeVideo( 'myPlayer', changeWidth, changeHeight );
			 });

			

Code Demo

Use the dropdown to change the size of the player

Bolt.setFullscreen( player_id , boolean )

Description: Makes the video player enter or exit full screen mode based on boolean provided.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.
boolean Type: Boolean
Description: If set to TRUE, player will enter Fullscreen Mode. If set to FALSE, player will exit Fullscreen Mode.

Usage

There may be times when you want to make the video player enter fullscreen mode. Using the setFullscreen() method with the boolean of true, the code snippet below makes the video player with the data-id of myPlayer enter Fullscreen Mode w.


				Bolt.setFullscreen( 'myPlayer', true );
			

Code Example

In this demo, the user can click a button which triggers the setFullscreen() method.


			
			<!-- button to trigger fullScreen() method -->
			<button class="btn-fullscreen">
				Set Fullscreen
			</button>
			<!-- /button to trigger fullScreen() method -->

			<!-- setFullscreen() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /setFullscreen() example -->

			

			
			 jQuery( '.btn-fullscreen' ).click( function(){
			      Bolt.setFullscreen( 'myPlayer', true );
			 });

			

Code Demo

Click the Set Fullscreen button to make the video player enter fullscreen mode.

Bolt.seek( player_id , time )

Description: Makes the player to seek to a certain time between start (0) and the end of the video (length of video in seconds). After scrubbing to specified time, the video will resume playing at specified time. The video must be already playing in order to seek to a time.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.
time Type: Number
Description: A whole number between 0 and total length of video represented in seconds. Time must be expressed in seconds. For example: 60 seek time would be representative of 60 seconds.

Usage

There may be times when you want to skip ahead or "seek" to a specific time in the video. Using the seek() method, the code snippet below will seek the video player with the data-id of myPlayer to the 24 second mark.


				Bolt.seek( 'myPlayer' , 24 );
			

Code Example

In this demo, the user can select a time to seek to from the dropdown. After selecting the seek time, the player will start playing and seek to the selected time using the seek() method by passing the seekTime value of the dropdown to the method.


			
			<!-- dropdown time selector -->
			<div class="form" style="margin: 25px 0;width: 360px;">
				<form role="form">
				<select class="form-control change-seek" style="width: 360px;color: #000;">
					<option disabled="" selected="">Select player seek time:</option>
					<option value="10">10 Seconds - Bolt.seek( 'myPlayer' , 10 );</option>
					<option value="20">20 Seconds - Bolt.seek( 'myPlayer' , 20 );</option>
					<option value="30">30 Seconds - Bolt.seek( 'myPlayer' , 30 );</option>
					<option value="40">40 Seconds - Bolt.seek( 'myPlayer' , 40 );</option>
					<option value="50">50 Seconds - Bolt.seek( 'myPlayer' , 50 );</option>
					<option value="60">60 Seconds - Bolt.seek( 'myPlayer' , 60 );</option>
				</select>
				</form>
			</div>
			<!-- /dropdown time selector -->

			<!-- seek() example -->
			<script
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /seek() example -->

			

			// when dropdown is clicked, play video with data-id of myPlayer
			jQuery( '.change-seek' ).click( function(){
				Bolt.playMedia( 'myPlayer' );
			});

			// on the change event of the dropdown, pass the seekTime to the seek() method
			jQuery( document ).on( 'change', '.change-seek', function(){
				var seekTime = parseInt( jQuery( this ).find( 'option:selected' ).attr( 'value' ));
				Bolt.seek( 'myPlayer' , seekTime );
			});

			

Code Demo

Use the dropdown to seek to a time in the video:

Bolt.muteMedia( player_id )

Description: Mutes player audio, effectively setting the volume of the video player to 0. No audio will be heard by the user.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code

Usage

There may be instances when you want to mute the video player. Using the muteMedia() method, you can set the players audio to 0. In the code snippet below, the player with the data-id of myPlayer will be muted.


				Bolt.mutemedia( 'myPlayer' );
			

Code Example

In this demo, after the user clicks the Mute Video button, the player's audio will be muted via the muteMedia() method.


			
			<!-- mute button -->
				<button type="button" class="btn-mute-media">Mute Video</button>
			<!-- /mute button -->

			<!-- muteMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /muteMedia() example -->

			


			// when button with "mute" class is clicked, mute myPlayer
			jQuery( '.btn-mute-media' ).click( function(){
				Bolt.muteMedia( 'myPlayer' );
			});
	
			

Code Demo

Click play and then the Mute Video button to mute the audio of the video player.

Bolt.unmuteMedia( player_id )

Description: Sets the volume of the video player back to the previous volume before the player was muted. If player is not muted unmuteMedia() will have no effect.

Parameters

player_id Type: String
Description: Sets the volume of the video player back to the previous volume before the player was muted. If player is not muted unmuteMedia() will have no effect.

Usage

If a user mutes the the video, the unmuteMedia() method will unmute the video and set the volume back to the volume level previously set.


				Bolt.unmuteMedia( 'myPlayer' );
			

Code Example

In this demo, after the user clicks the Mute Video button, the user can then click the Unmute Video button to unmute the player's audio via the unmuteMedia() method.


			
			<!-- mute and unmute buttons -->
				<button type="button" class="btn-mute-media">Mute Video</button>
				<button type="button" class="btn-unmute-media">Unmute Video</button>
			<!-- /mute and unmute buttons -->

			<!-- unmuteMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /unmuteMedia() example -->

			


			// when button with "mute" class is clicked, mute myPlayer
			jQuery( '.btn-mute-media' ).click( function(){
				Bolt.muteMedia( 'myPlayer' );
			});
			
			// when button with "unmute" class is clicked, unmute myPlayer
			jQuery( '.btn-unmute-media' ).click( function(){
				Bolt.unmuteMedia( 'myPlayer' );
			});

			

Code Demo

Click play and then try clicking the Mute Video button and then Unmute Video.

Bolt.setVolume( player_id, volume )

Description: Sets the volume level of the specified video player. The video player must be playing to use this method.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.
volume Type: Number
Description: A decimal between 0 and 1 representing a percentage. i.e. 0.5 would represent 50% volume.

Usage

There may be instances when you want to set the volume of the video player to a specific volume level. Using the setVolume() method, the code snippet below sets the video player with a data-id of myPlayer to 10%.


				Bolt.setVolume( 'myPlayer', 0.1 );
			

Code Example

In this demo, the user can select a volume level from 0% to 100% using the dropdown menu. The setVolume() method will apply the selected volume level to the video player with the data-id of "myPlayer".


			
			<!-- dropdown volume level selector -->
			<div class="form" style="margin: 25px 0;width: 360px;">
				<form role="form">
				<select class="form-control change-volumes" style="width: 360px;color: #000;">
					<option disabled="" selected="">Select player volume level:</option>
					<option value="0">0% Volume - Bolt.setVolume( 'myPlayer' , 0 );</option>
					<option value="0.25">25% Volume - Bolt.setVolume( 'myPlayer' , 0.25 );</option>
					<option value="0.5">50% Volume - Bolt.setVolume( 'myPlayer' , 0.5 );</option>
					<option value="0.75">75% Volume - Bolt.setVolume( 'myPlayer' , 0.75 );</option>
					<option value="1">100% Volume - Bolt.setVolume( 'myPlayer' , 1 );</option>
				</select>
				</form>
			</div>
			<!-- /dropdown volume level selector -->

			<!-- setVolume() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /setVolume() example -->

			

			// when dropdown is clicked, play video with data-id of myPlayer
			jQuery( '.change-volume' ).click( function(){
				Bolt.playMedia( 'myPlayer' );
			});

			// set the volume of myPlayer with the user selected value
			jQuery( document ).on( 'change', '.change-volume', function(){
				var volumeLevel = parseInt( jQuery( this ).find( 'option:selected' ).attr( 'value' ) );
				Bolt.setVolume( 'myPlayer' , volumeLevel );
			});

			

Code Demo

Use the dropdown to change the volume of the player:

Bolt.replayMedia( player_id )

Description: Restarts video from the beginning and autoplays if video has completely played through and has ended. The method will not work unless the video has completed.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code

Usage

Using the replayMedia() method, the code snippet below replays the video player with the data-id of myPlayer.


				Bolt.replayMedia( 'myPlayer' );
			

Code Example

In this demo, the user can click the End Video button to seek to the end of the video. Once the video completes, you can click the Replay Media button to start the video over via the replayMedia() method.


			
			<!-- replayMedia button -->
				<button type="button" class="btn-seekend">End of Video</button>
				<button type="button" class="btn-replay-media">Replay Media</button>
			<!-- /replayMedia button -->

			<!-- replayMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /replayMedia() example -->

			


			jQuery( '.btn-seekend' ).click( function(){
				// play video
				Bolt.playMedia( 'myPlayer' );

				// wait 400ms for player to start playing and seek to the 91 second mark
				var holdPlay = window.setTimeout( seekVideo , 400 );
				function seekVideo(){
					Bolt.seek( 'myPlayer', 91 );
				}
			});
			
			// replay myPlayer when button is clicked
			jQuery( '.btn-replay-media' ).click( function(){
				Bolt.replayMedia( 'myPlayer' );
			});

			

Code Demo

Click the End of Video button which will play the video and seek to the 1:31 mark and will play to the 1:32 second mark, the end of the video. If you press the Replay media button, the video will replay from the beginning because the end of the video has been reached.

Bolt.stopMedia( player_id )

Description: Stops video content. If the content is already stopped, this has no effect. However if video is playing or paused, stopMedia() will set the player back to the beginning of the video. Unlike pauseMedia(), stopMedia() sets the video player time back to the beginning of the video.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.

Usage

In the code snippet below, using the stopMedia() method, the video player with the data-id of myPlayer stops and scrubs back to the 0:00 mark.


				Bolt.stopMedia( 'myPlayer' );
			

Code Example

In the demo, the user can click the Play Media button to start video playback. After playing, you can click the Pause Media and Stop Media buttons.


			
			<!-- stop, pause and play buttons -->
			<button type="button" class="btn-play-media">Play Media</button>
			<button type="button" class="btn-pause-media">Pause Media</button>
			<button type="button" class="btn-stop-media">Stop Media</button>
			<!-- /stop, pause and play buttons -->

			<!-- stopMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / stopMedia() example -->

			

			
			// when button is clicked, play video with data-id of myPlayer
			jQuery( '.btn-play-media' ).click( function(){
				Bolt.playMedia('myPlayer');
			});
			// when button is clicked, pause video with data-id of myPlayer
			jQuery( '.btn-pause-media' ).click( function(){
				Bolt.pauseMedia( 'myPlayer' );
			});
			// when button is clicked, stop video with data-id of myPlayer
			jQuery( '.btn-stop-media' ).click( function(){
				Bolt.stopMedia( 'myPlayer' );
			});

			

Code Demo

First click the Play Media button to play the video, click the Pause Media and Stop Media buttons to see the difference in behavior between both methods.

Bolt.pauseMedia( player_id )

Description: Pauses an actively playing video player. If video player is already paused, pauseMedia() will not do anything.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.

Usage

There may be time you wish to stop the video from playing. Using the stopMedia() method, the code snippet below, the video player with the data-id of myPlayer stops and scrubs back to the 0:00 mark.


				Bolt.pauseMedia( 'myPlayer' );
			

Code Example

In the demo, the user can click the Play Media button to start video playback. After playing, you can click the Pause Media and Stop Media buttons.


			
			<!-- stop, pause and play buttons -->
			<button type="button" class="btn-play-media">Play Media</button>
			<button type="button" class="btn-pause-media">Pause Media</button>
			<button type="button" class="btn-stop-media">Stop Media</button>
			<!-- /stop, pause and play buttons -->

			<!-- pauseMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / pauseMedia() example -->

			

			
			// when button is clicked, play video with data-id of myPlayer
			jQuery( '.btn-play-media' ).click(function(){
				Bolt.playMedia( 'myPlayer');
			});
			// when button is clicked, pause video with data-id of myPlayer
			jQuery( '.btn-pause-media' ).click(function(){
				Bolt.pauseMedia( 'myPlayer' );
			});
			// when button is clicked, stop video with data-id of myPlayer
			jQuery( '.btn-stop-media' ).click(function(){
				Bolt.stopMedia( 'myPlayer' );
			});

			

Code Demo

First click the Play Media button to play the video, click the Pause Media and Stop Media buttons to see the difference in behavior between both methods.

Bolt.playMedia( player_id )

Description: Starts the playback of the video player. If video is paused the player will resume play from the same location that it was paused at. If video has reached end of playback, playMedia() will start play from the beginning of the video.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code.

Usage

There may be time you wish to start the video playback. In the code snippet below, the playMedia() method will start playback of the video player with data-id of myPlayer.


				Bolt.playMedia( 'myPlayer' );
			

Code Example

In this demo, when you click the Play Media button, the playMedia() method will start the playback of the video.


			
			<!--  Play button -->
			<button type="button" class="btn-play-media">Play Media</button>
			<!-- /Play button -->

			<!-- playMedia() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / playMedia() example -->

			

			
			// when button is clicked, play video with data-id of myPlayer
			jQuery( '.btn-play-media' ).click( function(){
				Bolt.playMedia( 'myPlayer' );
			});

			

Code Demo

Click the Play Media button to start video playback.

Bolt.removeVideo( player_id , boolean )

Description: Removes the video object and/or the video container from the DOM depending on the boolean passed

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code
boolean Type: boolean
Description: A boolean value which determines whether the video object and/or the video container will be removed from the DOM. For example, if true is passed in, the script embed tag and all divs relating to the Bolt Player will be removed from the DOM. If false is passed in, the script embed tag and all divs relating to the Bolt Player except the div containing the poster image will be removed from the DOM. If no boolean is passed, false will be used.

Usage

There may be time you wish to remove the video player from the DOM. Using the removeVideo() method you can easily do this, the code snippet below will remove the video player.


				// remove player, poster image remains
				Bolt.removeVideo( 'myPlayer' , false );

				// destroys video player completely
				Bolt.removeVideo( 'myPlayer' , true );
			

Code Example

In this demo, when the user clicks the Remove Video or Remove Container button, the removeVideo() method will destroy the video player.


			
			<!--  remove video buttons -->
			<button type="button" class="btn-remove-video">Remove Video</button>
			<button type="button" class="btn-remove-video-container">Remove Video Container </button>
			<!-- /remove video buttons -->

			<!-- removeVideo() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / removeVideo() example -->

			

			
			// when remove video button is clicked, video with data-id of myPlayer
			// will be removed, but poster image will remain
			jQuery( '.btn-remove-video' ).click( function(){
				Bolt.removeVideo( 'myPlayer', false );
			});

			// when remove video container is clicked, video with data-id of myPlayer
			// and anything player related will be removed
			jQuery( '.btn-remove-video-container' ).click( function(){
				Bolt.removeVideo( 'myPlayer', true );
			});

			

Code Demo

Click the Remove Video and Remove Container buttons to experience the difference in behavior between sending true and false.

Bolt.renderPlayer( player_id )

Description: Renders the player onto the web page when setting the data-autoload attribute to false. This method can only be called once.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code

Usage

If you want to delay or lazy load the player rendering to the DOM, set the data-autoload attribute to false which will prevent the video player from rendering. You then have the ability to render the player dynamically using the renderPlayer() method. The code snippet below will render the video player.


				// renders the player with the data-id of myPlayer
				Bolt.renderPlayer( 'myPlayer' );
			

Code Example

In this demo, when the user clicks the Render Player the renderPlayer() method will render the video player.


			
			<!--  render player button -->
			<button type="button" class="btn-render-player">Render Player</button>
			<!-- /render player button -->

			<!-- renderPlayer() example -->
			<script 
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-autoload="false"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / renderPlayer() example -->

			


			// when render player is clicked, video with data-id of myPlayer
			// will render onto the page where the embed is located
			jQuery( '.btn-render-player' ).click( function(){
				Bolt.renderPlayer( 'myPlayer' );
			});

			

Code Demo

Click the Render Player button to render the player to the DOM.

Bolt.BOLT_AD_REQUEST_START

BOLT_AD_REQUEST_START Type: Player Event
Description: This event is triggered when the video player starts the ad calling process. This event is fired for each pre-roll, mid-roll, post-roll and overlay ad call.

Usage

If you are looking for a way to listen for when the video player sends a request for an ad, you can simply listen to the Bolt.BOLT_AD_REQUEST_START player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.


			Bolt.on( 'myPlayer', Bolt.BOLT_AD_REQUEST_START, function() {
			    // do something
			  	console.log('BOLT_AD_REQUEST_START Fired');
			});
			

Code Example

In this demo, the player will load and call the boltEventListener() function once fully loaded via the data-onready attribute. Every time the BOLT_AD_REQUEST_START event fires, a log message will appear in the bolt-logger <ul> for pre-roll (0:00 mark), overlay (0:15 mark), mid-roll (1:00 mark) and post-roll (1:32 mark).



			<!-- BOLT_AD_REQUEST_START example -->
			<script 
				data-config="//support.playwire.com/demos/config_all.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				data-onready="bolt_ad_request_start"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / BOLT_AD_REQUEST_START example -->

			<p>Bolt Event Logger:</p>
			<ul class="bolt-logger"></ul>

			

			function bolt_ad_request_start(){
				Bolt.on( 'myPlayer', Bolt.BOLT_AD_REQUEST_START, function(){ 
					var message = 'BOLT_AD_REQUEST_START - Event Fired';
					console.log( message );
					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
				});
			}
			

Code Demo

Press play to watch the BOLT_AD_REQUEST_START events fire.

Bolt Event Logger:

    Bolt.BOLT_AD_STARTED

    BOLT_AD_STARTED Type: Event
    Description: This event is triggered when the ad creative starts to play. This event is fired for each pre-roll, mid-roll, post-roll and overlay ad calls.

    Usage

    If you are looking for a way to listen when a ad starts playing in the video player, you can simply listen to the Bolt.BOLT_AD_STARTED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

    
    			Bolt.on( 'myPlayer', Bolt.BOLT_AD_STARTED, function() {
    			    // do something
    			  	console.log( 'BOLT_AD_STARTED Fired' );
    			});
    			

    Code Example

    In this demo, the player will load and call the bolt_ad_started() function once fully loaded via the data-onready attribute. Every time the BOLT_AD_STARTED fires, a log message will appear in the bolt-logger <ul> for pre-roll (0:00 mark), overlay (0:15 mark), mid-roll (1:00 mark) and post-roll (1:32 mark).

    
    
    			<!-- BOLT_AD_STARTED example -->
    			<script 
    				data-config="//support.playwire.com/demos/config_all.json"
    				data-height="100%"
    				data-width="100%"
    				data-id="myPlayer"
    				data-onready="bolt_ad_started"
    				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
    				type="text/javascript">
    			</script>
    			<!-- / BOLT_AD_STARTED example -->
    
    			<p>Bolt Event Logger:</p>
    			<ul class="bolt-logger"></ul>
    
    			
    
    			function bolt_ad_started(){
    				Bolt.on( 'myPlayer', Bolt.BOLT_AD_STARTED, function(){ 
    					var message = 'BOLT_AD_STARTED - Event Fired';
    					console.log( message );
    					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
    				});
    			}
    			

    Code Demo

    Press play to watch the BOLT_AD_STARTED events fire.

    Bolt Event Logger:

      Bolt.BOLT_AD_ERROR

      BOLT_AD_ERROR Type: Player Event
      Description: Event fired when there is a problem when requesting ads. Client and server side connectivity issues, incorrect ad tag formatting and ad networks returning no ad fill are all possible reasons why you may see this error.

      Usage

      If you are looking for a way to listen to for the video player requests an ad but returns an error, you can simply listen to the Bolt.BOLT_AD_ERROR player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

      
      			Bolt.on( 'myPlayer', Bolt.BOLT_AD_ERROR, function() {
      			    // do something
      			  	console.log( 'BOLT_AD_ERROR Fired' );
      			});
      			

      Code Example

      In this demo, the player will load and call the bolt_ad_error() function once fully loaded via the data-onready attribute. The BOLT_AD_ERROR will fire due to an error in the ad tag formatting and a log message will appear in the bolt-logger <ul>

      
      
      			<!-- BOLT_AD_ERROR example -->
      			<script 
      				data-config="//support.playwire.com/demos/config_ad_error.json"
      				data-height="100%"
      				data-width="100%"
      				data-id="myPlayer"
      				data-onready="bolt_ad_error"
      				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
      				type="text/javascript">
      			</script>
      			<!-- / BOLT_AD_ERROR example -->
      
      			<p>Bolt Event Logger:</p>
      			<ul class="bolt-logger"></ul>
      
      			
      
      			function bolt_ad_error(){
      				Bolt.on( 'myPlayer', Bolt.BOLT_AD_ERROR, function(){ 
      					var message = 'BOLT_AD_ERROR - Event Fired';
      					console.log( message );
      					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
      				});
      			}
      			

      Code Demo

      Press play to watch the BOLT_AD_ERROR events fire.

      Bolt Event Logger:

        Bolt.BOLT_AD_CLICKED

        BOLT_AD_CLICKED Type: Player Event
        Description: Event fired when a user clicks the ad creative. Generally, this event is supported by all creative types, but there may be exceptions if there is an issue with the ad creative itself.

        Usage

        If you are looking for a way to listen for when a user clicks the ad creative, you can simply listen to the Bolt.BOLT_AD_CLICKED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

        
        			Bolt.on( 'myPlayer', Bolt.BOLT_AD_CLICKED, function() {
        			    // do something
        			  	console.log( 'BOLT_AD_CLICKED Fired' );
        			});
        			

        Code Example

        In this demo, the player will load and call the bolt_ad_clicked() function once fully loaded via the data-onready attribute. When the ad creative is clicked, the BOLT_AD_CLICKED event will fire and a log message will appear in the bolt-logger <ul>

        
        
        			<!-- BOLT_AD_CLICKED example -->
        			<script 
        				data-config="//support.playwire.com/demos/config_all.json"
        				data-height="100%"
        				data-width="100%"
        				data-id="myPlayer"
        				data-onready="bolt_ad_clicked"
        				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
        				type="text/javascript">
        			</script>
        			<!-- / BOLT_AD_CLICKED example -->
        
        			<p>Bolt Event Logger:</p>
        			<ul class="bolt-logger"></ul>
        
        			
        
        			function bolt_ad_clicked(){
        				Bolt.on( 'myPlayer', Bolt.BOLT_AD_CLICKED, function(){ 
        					var message = 'BOLT_AD_CLICKED - Event Fired';
        					console.log( message );
        					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
        				});
        			}
        			

        Code Demo

        Press play and click the ad creative, a new browser window will open. Navigate back to this page to see that the BOLT_AD_CLICKED event fired.

        Bolt Event Logger:

          Bolt.BOLT_FIRST_QUARTILE

          BOLT_FIRST_QUARTILE Type: Player Event
          Description: Event fired when 25% of the ad creative has played through.

          Usage

          If you are looking for a way to listen for when 25% of an ad has played, you can simply listen to the Bolt.BOLT_AD_STARTED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

          
          			Bolt.on( 'myPlayer', Bolt.BOLT_FIRST_QUARTILE, function() {
          			    // do something
          			  	console.log( 'BOLT_FIRST_QUARTILE Fired' );
          			});
          			

          Code Example

          In this demo, the player will load and call the bolt_first_quartile() function once fully loaded via the data-onready attribute. When 25% of the ad creative plays, the BOLT_FIRST_QUARTILE event will fire and a log message will appear in the bolt-logger <ul>

          
          
          			<!-- BOLT_FIRST_QUARTILE example -->
          			<script 
          				data-config="//support.playwire.com/demos/config_all.json"
          				data-height="100%"
          				data-width="100%"
          				data-id="myPlayer"
          				data-onready="bolt_first_quartile"
          				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
          				type="text/javascript">
          			</script>
          			<!-- / BOLT_FIRST_QUARTILE example -->
          
          			<p>Bolt Event Logger:</p>
          			<ul class="bolt-logger"></ul>
          
          			
          
          			function bolt_first_quartile(){
          				Bolt.on( 'myPlayer', Bolt.BOLT_FIRST_QUARTILE, function(){ 
          					var message = 'BOLT_FIRST_QUARTILE - Event Fired';
          					console.log( message );
          					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
          				});
          			}
          			

          Code Demo

          Press play to watch the BOLT_FIRST_QUARTILE events fire.

          Bolt Event Logger:

            Bolt.BOLT_MIDPOINT

            BOLT_MIDPOINT Type: Player Event
            Description: Event fired when 50% of the ad creative plays through.

            Usage

            If you are looking for a way to listen to when 50% of an ad plays, you can simply listen to the Bolt.BOLT_MIDPOINT player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

            
            			Bolt.on( 'myPlayer', Bolt.BOLT_MIDPOINT, function() {
            			    // do something
            			  	console.log( 'BOLT_MIDPOINT Fired' );
            			});
            			

            Code Example

            In this demo, the player will load and call the bolt_midpoint() function once fully loaded via the data-onready attribute. When the ad creative plays 50% through, the BOLT_MIDPOINT event will fire and a log message will appear in the bolt-logger <ul>

            
            
            			<!-- BOLT_MIDPOINT example -->
            			<script 
            				data-config="//support.playwire.com/demos/config_all.json"
            				data-height="100%"
            				data-width="100%"
            				data-id="myPlayer"
            				data-onready="bolt_midpoint"
            				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
            				type="text/javascript">
            			</script>
            			<!-- / BOLT_MIDPOINT example -->
            
            			<p>Bolt Event Logger:</p>
            			<ul class="bolt-logger"></ul>
            
            			
            
            			function bolt_midpoint(){
            				Bolt.on( 'myPlayer', Bolt.BOLT_MIDPOINT, function(){ 
            					var message = 'BOLT_AD_MIDPOINT - Event Fired';
            					console.log( message );
            					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
            				});
            			}
            			

            Code Demo

            Press play to watch the BOLT_MIDPOINT events fire.

            Bolt Event Logger:

              Bolt.BOLT_THIRD_QUARTILE

              BOLT_THIRD_QUARTILE Type: Player Event
              Description: Event fired when 75% of an ad creative plays through.

              Usage

              If you are looking for a way to listen to when 75% of an ad plays, you can simply listen to the Bolt.BOLT_THIRD_QUARTILE player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

              
              			Bolt.on( 'myPlayer', Bolt.BOLT_THIRD_QUARTILE, function() {
              			    // do something
              			  	console.log( 'BOLT_THIRD_QUARTILE Fired' );
              			});
              			

              Code Example

              In this demo, the player will load and call the bolt_third_quartile() function once fully loaded via the data-onready attribute. When the ad creative plays 75% through, the BOLT_THIRD_QUARTILE event will fire and a log message will appear in the bolt-logger <ul>

              
              
              			<!-- BOLT_THIRD_QUARTILE example -->
              			<script 
              				data-config="//support.playwire.com/demos/config_all.json"
              				data-height="100%"
              				data-width="100%"
              				data-id="myPlayer"
              				data-onready="bolt_third_quartile"
              				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
              				type="text/javascript">
              			</script>
              			<!-- / BOLT_THIRD_QUARTILE example -->
              
              			<p>Bolt Event Logger:</p>
              			<ul class="bolt-logger"></ul>
              
              			
              
              			function bolt_third_quartile(){
              				Bolt.on( 'myPlayer', Bolt.BOLT_THIRD_QUARTILE, function(){ 
              					var message = 'BOLT_THIRD_QUARTILE - Event Fired';
              					console.log( message );
              					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
              				});
              			}
              			

              Code Demo

              Press play to watch the BOLT_THIRD_QUARTILE events fire.

              Bolt Event Logger:

                Bolt.BOLT_AD_COMPLETE

                BOLT_AD_COMPLETE Type: Player Event
                Description: Event fired when the end of the video ad creative is reached. The event fires after pre-roll, mid-roll and post-roll advertising.

                Usage

                If you are looking for a way to listen to when the ad creative has played all the way through, you can simply listen to the Bolt.BOLT_AD_COMPLETE player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                
                			Bolt.on( 'myPlayer', Bolt.BOLT_AD_COMPLETE, function() {
                			    // do something
                			  	console.log( 'BOLT_AD_COMPLETE Fired' );
                			});
                			

                Code Example

                In this demo, the player will load and call the bolt_ad_complete() function once fully loaded via the data-onready attribute. When the ad creative plays all the way through, the BOLT_AD_COMPLETE event will fire and a log message will appear in the bolt-logger <ul>. This will happen 3 times: after pre-roll, mid-roll and post-roll ads.

                
                
                			<!-- BOLT_AD_COMPLETE example -->
                			<script 
                				data-config="//support.playwire.com/demos/config_all.json"
                				data-height="100%"
                				data-width="100%"
                				data-id="myPlayer"
                				data-onready="bolt_ad_complete"
                				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                				type="text/javascript">
                			</script>
                			<!-- / BOLT_AD_COMPLETE example -->
                
                			<p>Bolt Event Logger:</p>
                			<ul class="bolt-logger"></ul>
                
                			
                
                			function bolt_ad_complete(){
                				Bolt.on( 'myPlayer', Bolt.BOLT_AD_COMPLETE, function(){ 
                					var message = 'BOLT_AD_COMPLETE - Event Fired';
                					console.log( message );
                					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                				});
                			}
                			

                Code Demo

                Press play to watch the BOLT_AD_COMPLETE events fire.

                Bolt Event Logger:

                  Bolt.BOLT_AD_CUEPOINT

                  BOLT_AD_CUEPOINT Type: Player Event
                  Description: Event fired when an ad cuepoint is reached in the videos timeline which will play a mid-roll ad.

                  Usage

                  If you are looking for a way to listen to when the video player reaches an ad cuepoint, you can simply listen to the Bolt.BOLT_AD_CUEPOINT player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                  
                  			Bolt.on( 'myPlayer', Bolt.BOLT_AD_CUEPOINT, function() {
                  			    // do something
                  			  	console.log( 'BOLT_AD_CUEPOINT Fired' );
                  			});
                  			

                  Code Example

                  In this demo, the player will load and call the bolt_ad_cuepoint() function once fully loaded via the data-onready attribute. When the video player reaches 5 seconds, the BOLT_AD_CUEPOINT event will fire and a log message will appear in the bolt-logger <ul>.

                  
                  
                  			<!-- BOLT_AD_CUEPOINT example -->
                  			<script 
                  				data-config="//support.playwire.com/demos/config_cuepoint.json"
                  				data-height="100%"
                  				data-width="100%"
                  				data-id="myPlayer"
                  				data-onready="bolt_ad_cuepoint"
                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                  				type="text/javascript">
                  			</script>
                  			<!-- / BOLT_AD_CUEPOINT example -->
                  
                  			<p>Bolt Event Logger:</p>
                  			<ul class="bolt-logger"></ul>
                  
                  			
                  
                  			function bolt_ad_cuepoint(){
                  				Bolt.on( 'myPlayer', Bolt.BOLT_AD_CUEPOINT, function(){ 
                  					var message = 'BOLT_AD_CUEPOINT - Event Fired';
                  					console.log( message );
                  					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                  				});
                  			}
                  			

                  Code Demo

                  Press play to watch the BOLT_AD_CUEPOINT events fire.

                  Bolt Event Logger:

                    Bolt.BOLT_CONTENT_STARTED

                    BOLT_CONTENT_STARTED Type: Player Event
                    Description: Event fired when video content starts to play. If there is a pre-roll ad, this event will happen after the pre-roll ends.

                    Usage

                    If you are looking to a way to listen to when the video content starts to play, you can simply listen to the Bolt.BOLT_CONTENT_STARTED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                    
                    			Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function() {
                    			    // do something
                    			  	console.log( 'BOLT_CONTENT_STARTED Fired' );
                    			});
                    			

                    Code Example

                    In this demo, the player will load and call the bolt_content_started() function once fully loaded via the data-onready attribute. Since there isn't a pre-roll ad in the demo, the BOLT_CONTENT_STARTED will fire and a log message will appear in the bolt-logger <ul>.

                    
                    
                    			<!-- BOLT_CONTENT_STARTED example -->
                    			<script 
                    				data-config="//support.playwire.com/demos/config_all.json"
                    				data-height="100%"
                    				data-width="100%"
                    				data-id="myPlayer"
                    				data-onready="bolt_content_started"
                    				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                    				type="text/javascript">
                    			</script>
                    			<!-- / BOLT_CONTENT_STARTED example -->
                    
                    			<p>Bolt Event Logger:</p>
                    			<ul class="bolt-logger"></ul>
                    
                    			
                    
                    			function bolt_content_started(){
                    				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function(){ 
                    					var message = 'BOLT_CONTENT_STARTED - Event Fired';
                    					console.log( message );
                    					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                    				});
                    			}
                    			

                    Code Demo

                    Press play to watch the BOLT_CONTENT_STARTED events fire.

                    Bolt Event Logger:

                      Bolt.BOLT_CONTENT_STATE_CHANGED

                      BOLT_CONTENT_STATE_CHANGED Type: Player Event
                      Description: Event fired when video state changes, such as: playing, pausing or stopping the player. This event will also trigger after pre-roll and mid-roll ads play.

                      Usage

                      If you are looking for a way to listen to when the video state changes you can simply listen to the Bolt.BOLT_CONTENT_STATE_CHANGED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                      
                      			Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STATE_CHANGED, function() {
                      			    // do something
                      			  	console.log( 'BOLT_CONTENT_STATE_CHANGED Fired' );
                      			});
                      			

                      Code Example

                      In this demo, the player will load and call the bolt_content_state_changed() function once fully loaded via the data-onready attribute. Every time the user plays or pauses the player, the BOLT_CONTENT_STATE_CHANGED will fire and a log message will appear in the bolt-logger <ul>.

                      
                      
                      			<!-- BOLT_CONTENT_STATE_CHANGED example -->
                      			<script 
                      				data-config="//support.playwire.com/demos/config_all.json"
                      				data-height="100%"
                      				data-width="100%"
                      				data-id="myPlayer"
                      				data-onready="bolt_content_state_changed"
                      				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                      				type="text/javascript">
                      			</script>
                      			<!-- / BOLT_CONTENT_STATE_CHANGED example -->
                      
                      			<p>Bolt Event Logger:</p>
                      			<ul class="bolt-logger"></ul>
                      
                      			
                      
                      			function bolt_content_state_changed(){
                      				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STATE_CHANGED, function(){ 
                      					var message = 'BOLT_CONTENT_STATE_CHANGED - Event Fired';
                      					console.log( message );
                      					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                      				});
                      			}
                      			

                      Code Demo

                      Press play to watch the BOLT_CONTENT_STATE_CHANGED events fire.

                      Bolt Event Logger:

                        Bolt.BOLT_CONTENT_ERROR

                        BOLT_CONTENT_ERROR Type: Player Event
                        Description: Event fired when there is an error when trying to play video content.

                        Usage

                        If you are looking for a way to listen if there is an error with your video content, you can simply listen to the Bolt.BOLT_CONTENT_ERROR player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                        
                        			Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_ERROR, function() {
                        			    // do something
                        			  	console.log( 'BOLT_CONTENT_ERROR Fired' );
                        			});
                        			

                        Code Example

                        In this demo, the player will load and call the bolt_content_error() function once fully loaded via the data-onready attribute. The player is not able to load the correct content files resulting in the BOLT_CONTENT_ERROR firing and a log message will appear in the bolt-logger <ul>.

                        
                        
                        			<!-- BOLT_CONTENT_ERROR example -->
                        			<script 
                        				data-config="//support.playwire.com/demos/config_content_error.json"
                        				data-height="100%"
                        				data-width="100%"
                        				data-id="myPlayer"
                        				data-onready="bolt_content_error"
                        				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                        				type="text/javascript">
                        			</script>
                        			<!-- / BOLT_CONTENT_ERROR example -->
                        
                        			<p>Bolt Event Logger:</p>
                        			<ul class="bolt-logger"></ul>
                        
                        			
                        
                        			function bolt_content_error(){
                        				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_ERROR, function(){ 
                        					var message = 'BOLT_CONTENT_ERROR - Event Fired';
                        					console.log( message );
                        					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                        				});
                        			}
                        			

                        Code Demo

                        Press play to watch the BOLT_CONTENT_ERROR event fire.

                        Bolt Event Logger:

                          Bolt.BOLT_CONTENT_COMPLETE

                          BOLT_CONTENT_COMPLETE Type: Player Event
                          Description: Event fired when video content reaches the end of the play time.

                          Usage

                          If you are looking to a way to listen to the end of video content playback, you can use the Bolt.BOLT_CONTENT_COMPLETE player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                          
                          			Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_COMPLETE, function() {
                          			    // do something
                          			  	console.log( 'BOLT_CONTENT_COMPLETE Fired' );
                          			});
                          			

                          Code Example

                          In this demo, the player will load and call the bolt_content_complete() function once fully loaded via the data-onready attribute. Scrub to the end of the video to watch the BOLT_CONTENT_COMPLETE fire. A log message will appear in the bolt-logger <ul>. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                          
                          
                          			<!-- BOLT_CONTENT_COMPLETE example -->
                          			<script 
                          				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                          				data-height="100%"
                          				data-width="100%"
                          				data-id="myPlayer"
                          				data-onready="bolt_content_complete"
                          				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                          				type="text/javascript">
                          			</script>
                          			<!-- / BOLT_CONTENT_COMPLETE example -->
                          
                          			<p>Bolt Event Logger:</p>
                          			<ul class="bolt-logger"></ul>
                          
                          			
                          
                          			function bolt_content_complete(){
                          				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_COMPLETE, function(){ 
                          					var message = 'BOLT_CONTENT_COMPLETE - Event Fired';
                          					console.log( message );
                          					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                          				});
                          			}
                          			

                          Code Demo

                          Press play and scrub to the end of the video to watch the BOLT_CONTENT_COMPLETE event fire.

                          Bolt Event Logger:

                            showHiddenContainer

                            showHiddenContainer Type: Player Event
                            Description: Pre-Content Player Event fired after ad is complete or no ads are returned. During the ad calling process, a pre-loader will be visible until an ad is returned or not - at which point the event is fired.

                            Usage

                            If you are looking for a way to listen to when the ad creative has played all the way through or if no ads were returned, you can simply listen to the showHiddenContainer player event. In the code snippet below, the Pre-Content Player with the data-id of 'myPlayer' will load and look for an ad, after it completes, the showHiddenContainer event will fire.

                            
                            			Bolt.on( 'myPlayer', 'showHiddenContainer', function() {
                            			    // do something
                            			  	console.log( 'showHiddenContainer Fired' );
                            			});
                            			

                            Code Example

                            In this demo, the Pre-Content player will load and call the boltEventHandlers() function once fully loaded via the data-onready attribute. When the ad creative plays all the way through, the showHiddenContainer event will fire and a log message will appear in the bolt-logger <ul>.

                            
                            
                            			<!-- showHiddenContainer example -->
                            			<div id="my-content" style="display:none;position:absolute;">
                            				Put your content here.
                            			</div>
                            
                            			<script 
                            				data-config="//cdn.playwire.com/test-configs/pre_content.json"
                            				data-height="100%"
                            				data-width="100%"
                            				data-hidden-container="my-content"
                            				data-id="myPlayer"
                            				data-id="boltEventHandlers"
                            				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                            				charset="utf-8"
                            				type="text/javascript">
                            			</script>
                            			<!-- / showHiddenContainer example -->
                            
                            			<p>Bolt Event Logger:</p>
                            			<ul class="bolt-logger"></ul>
                            
                            			
                            
                            			function boltEventHandlers(){
                            				Bolt.on( 'myPlayer', 'showHiddenContainer', function(){ 
                            					var message = 'showHiddenContainer - Event Fired';
                            					console.log( message );
                            					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                            				});
                            			}
                            			

                            Code Demo

                            The Pre-Content Player will load and play an ad. When the ad is complete, the showHiddenContainer will be fired. Press the Load Demo button below to load the Pre-Content Player.

                            Load Demo View Source

                            Bolt Event Logger:

                              Bolt.BOLT_TOGGLE_FULLSCREEN

                              BOLT_TOGGLE_FULLSCREEN Type: Player Event
                              Description: Event fired when Fullscreen mode is entered and exited. Please note, this event fires once upon entering and once upon exiting Fullscreen mode.

                              Usage

                              If you are looking to a way to listen when a user enters Fullscreen mode, you can simply listen to the Bolt.BOLT_TOGGLE_FULLSCREEN player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                              
                              			Bolt.on( 'myPlayer', Bolt.BOLT_TOGGLE_FULLSCREEN, function() {
                              			    // do something
                              			  	console.log( 'BOLT_TOGGLE_FULLSCREEN Fired' );
                              			});
                              			

                              Code Example

                              In this demo, the player will load and call the bolt_toggle_fullscreen() function once fully loaded via the data-onready attribute. When you enter and exit Fullscreen mode, the BOLT_TOGGLE_FULLSCREEN event will fire and a log message will appear in the bolt-logger <ul>.

                              
                              
                              			<!-- BOLT_TOGGLE_FULLSCREEN example -->
                              			<script 
                              				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                              				data-height="100%"
                              				data-width="100%"
                              				data-id="myPlayer"
                              				data-onready="bolt_toggle_fullscreen"
                              				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                              				type="text/javascript">
                              			</script>
                              			<!-- / BOLT_TOGGLE_FULLSCREEN example -->
                              
                              			<p>Bolt Event Logger:</p>
                              			<ul class="bolt-logger"></ul>
                              
                              			
                              
                              			function bolt_toggle_fullscreen(){
                              				Bolt.on( 'myPlayer', Bolt.BOLT_TOGGLE_FULLSCREEN, function(){ 
                              					var message = 'BOLT_TOGGLE_FULLSCREEN - Event Fired';
                              					console.log( message );
                              					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                              				});
                              			}
                              			

                              Code Demo

                              Press play to watch the BOLT_TOGGLE_FULLSCREEN events fire.

                              Bolt Event Logger:

                                Bolt.BOLT_VOLUME_CHANGED

                                BOLT_VOLUME_CHANGED Type: Player Event
                                Description: Event fired when volume is adjusted by the user via the user interface or the API.

                                Usage

                                If you are looking for a way to listen to when a user changes the volume, you can simply listen to the Bolt.BOLT_VOLUME_CHANGED player event. In the code snippet below, the video player with the data-id of 'myPlayer' will fire a function when the event is triggered.

                                
                                			Bolt.on( 'myPlayer', Bolt.BOLT_VOLUME_CHANGED, function() {
                                			    // do something
                                			  	console.log( 'BOLT_VOLUME_CHANGED Fired' );
                                			});
                                			

                                Code Example

                                In this demo, the player will load and call the bolt_volume_changed() function once fully loaded via the data-onready attribute. Every time you adjust the volume level, the BOLT_VOLUME_CHANGED event will fire and a log message will appear in the bolt-logger <ul>.

                                
                                
                                			<!-- BOLT_VOLUME_CHANGED example -->
                                			<script 
                                				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                				data-height="100%"
                                				data-width="100%"
                                				data-id="myPlayer"
                                				data-onready="bolt_volume_changed"
                                				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                				type="text/javascript">
                                			</script>
                                			<!-- / BOLT_VOLUME_CHANGED example -->
                                
                                			<p>Bolt Event Logger:</p>
                                			<ul class="bolt-logger"></ul>
                                
                                			
                                
                                			function bolt_volume_changed(){
                                				Bolt.on( 'myPlayer', Bolt.BOLT_VOLUME_CHANGED, function(){ 
                                					var message = 'BOLT_VOLUME_CHANGED - Event Fired';
                                					console.log( message );
                                					jQuery( '.bolt-logger' ).append( '<li>' + message + '</li>' );
                                				});
                                			}
                                			

                                Code Demo

                                Press play to watch the BOLT_VOLUME_CHANGED events fire.

                                Bolt Event Logger:

                                  data-active-color="color"

                                  color Type: String
                                  Description: The hexidecimal color code for active object coloring (e.g., 0xrrggbb) without an alpha channel. This will change the share bubble color and hover color, play button hover color, volume bar, and timeline color. The default value is 0x1eacfc, the color code must begin with 0x, then the 6 digit hexcode of the color. The color set here will override the color you set in the Video Player Customizer section.

                                  Usage

                                  
                                  			<!-- data-active-color example -->
                                  			<script 
                                  				data-active-color="0x00FF00"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-active-color example -->
                                  			

                                  Demo

                                  This player embed contains data-active-color="0x00FF00" which will set the active color to lime green.

                                  data-background-color="color"

                                  color Type: String
                                  Description: The hexidecimal color code for background object coloring (e.g., 0xrrggbb) without an alpha channel. This will change the share bubble icon color, big play button color and small play/pause hover color, volume icon and active color, and progress bar color. The default value is 0x313131, the color code must begin with 0x, then the 6 digit hexcode of the color. The color set here will override the color you set in the Video Player Customizer section.

                                  Usage

                                  
                                  			<!-- data-background-color example -->
                                  			<script 
                                  				data-background-color="0x00FF00"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-background-color example -->
                                  			

                                  Demo

                                  This player embed contains data-background-color="0x00FF00" which will set the background color to lime green.

                                  data-foreground-color="color"

                                  color Type: String
                                  Description: The hexidecimal color code for foreground object coloring (e.g., 0xrrggbb) without an alpha channel. This will change the share bubble icon color, play/pause/volume/fullscreen/logo icon color. The default value is 0xffffff, the color code must begin with 0x, then the 6 digit hexcode of the color. The color set here will override the color you set in the Video Player Customizer section.

                                  Usage

                                  
                                  			<!-- data-foreground-color example -->
                                  			<script 
                                  				data-foreground-color="0x00FF00"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-foreground-color example -->
                                  			

                                  Demo

                                  This player embed contains data-foreground-color="0x00FF00" which will set the foreground color to lime green.

                                  data-autoload="boolean"

                                  boolean (default: true) Type: Boolean
                                  Description: Determines whether the player is written to the DOM immediately during script execution, via document.write( ), or on demand via lazy load. Generally, we recommend leaving this value blank as it accounts for most embedding scenarios. However, in cases where it is more ideal to load the player at an arbitrary time after pageload, this attribute is helpful in conjunction with the Bolt.renderPlayer( ) method (see the “Lazy Loading” example in the Getting Started section).

                                  Usage

                                  
                                  			<!-- data-autoload example -->
                                  			<script 
                                  				data-autoload="true"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-autoload example -->
                                  			

                                  Demo

                                  This player embed contains data-autoload="true" which will render the player at runtime.

                                  data-container="div_id"

                                  div_id Type: String
                                  Description: The container that the player will be rendered into which can be located anywhere on the same webpage. If the container does not exist, it is created. If no container is specified, a random name is used and the container will be written at the location the script is called via document.write( ). If data-autoload is false, this attribute must be provided.

                                  Usage

                                  
                                  			<!-- div video player will be injected into -->
                                  			<div id="my-player-container"></div>
                                  
                                  			<!-- data-container example -->
                                  			<script 
                                  				data-container="my-player-container"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-container example -->
                                  			

                                  Demo

                                  This player embed contains data-container="my-player-container" which inject and load the video player into the <div> with the id of "my-player-container".

                                  data-id="player_id"

                                  player_id Type: String
                                  Description: The container that the player will be rendered into. If the container does not exist, it is created. If no container is specified, a random name is used and the container will be written at the location the script is called via document.write( ). If data-autoload is false, this attribute must be provided.

                                  Usage

                                  
                                  			<!-- data-id example -->
                                  			<script
                                  				data-id="myPlayer"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-id example -->
                                  			

                                  Demo

                                  This player embed contains data-id="myPlayer" which will allow you to target this specific player using Player methods, events and properties.

                                  data-config="URL"

                                  URL Type: String
                                  Description: The fully qualified URL for the video/playlist configuration JSON file. If unspecified, this attribute is automatically generated.

                                  Usage

                                  
                                  			<!-- data-config example -->
                                  			<script 
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-config example -->
                                  			

                                  Demo

                                  This player embed contains data-config="URL" which will add the attribute to the embed, which will load the player based on the settings set in the config file.

                                  data-height="player_height"

                                  player_height Type: String
                                  Description: The height of the rendered player. Values can be provided with either pixel units (px) or percentages (%). If no unit is provided, pixels are assumed. The default value is 100%. We recommend using 16:9 aspect ratios to prevent distortion of your video content. For example, 480x270, 640x360, 853x480 are all (width)x(height) dimensions using the 16:9 aspect ratio. Please note that, if your site uses a responsive page design, you will probably want to leave your width and height at the default 100% so that the player will automatically shrink with your page on small screens like phones and tablets.

                                  Usage

                                  
                                  			<!-- data-height example -->
                                  			<script 
                                  				data-height="360px"
                                  				data-width="640px"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-height example -->
                                  			

                                  Demo

                                  This player embed contains data-height="360px" which will set the active color to lime green.

                                  data-width="player_width"

                                  Description: The width of the rendered player. Values can be provided with either pixel units (px) or percentages (%). If no unit is provided, pixels are assumed. The default value is 100%. We recommend using 16:9 ratios. For example, 480x270, 640x360, 853x480 are all (width)x(height) dimensions using the 16:9 aspect ratio. Please note that, if your site uses a responsive page design, you will probably want to leave your width and height at the default 100% so that the player will automatically shrink with your page on small screens like phones and tablets.

                                  player_width Type: String
                                  Description: The hexidecimal color code for foreground object coloring (e.g., 0xrrggbb) without an alpha channel. The default value is 0xffffff.

                                  Usage

                                  
                                  			<!-- data-width example -->
                                  			<script
                                  				data-width="640px"
                                  				data-height="360px"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-width example -->
                                  			

                                  Demo

                                  This player embed contains data-width="640px" which will set the player's width to 640px.

                                  data-onready="function_name"

                                  function_name Type: String
                                  Description: When the player is fully loaded, the data-onready attribute specifies a function to call.

                                  Usage

                                  
                                  			<!-- data-onready example -->
                                  			<script 
                                  				data-onready="my_function"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-onready example -->
                                  			
                                  
                                  			function my_function(){
                                  				// do something
                                  				console.log( 'my_function() fired!' );
                                  			}
                                  			

                                  Demo

                                  This player embed contains data-onready="my_function" which will call the function my_function().

                                  data-volume="volume"

                                  volume Type: Number
                                  Description: The default initial player volume, from 0 - 1, 0 representing 0% and 1 representing 100%. The default value is set to 1 or 100%. For example, if you would like to set the volume level of the player to 50%, you would use "0.5" as your volume.

                                  Usage

                                  
                                  			<!-- data-volume example -->
                                  			<script 
                                  				data-volume="0"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-volume example -->
                                  			

                                  Demo

                                  This player embed contains data-volume="0" which will set the volume to 0.

                                  data-watermark-url="URL"

                                  URL Type: String
                                  Description: The clickthrough URL for the watermark image specified by data-watermark. If this attribute is not set, clicking the watermark will have no effect.

                                  Usage

                                  
                                  			<!-- data-watermark-url example -->
                                  			<script 
                                  				data-watermark-url="//www.playwire.com"
                                  				data-watermark="//support.playwire.com/watermark.png"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-watermark-url example -->
                                  			

                                  Demo

                                  This player embed contains data-watermark-url="//www.playwire.com" which will set the URL the user will be directed to when clicking the watermark image.

                                  data-watermark="URL"

                                  URL Type: String
                                  Description: The image URL for the watermark image. If this attribute is not set, no watermark will be shown overlaying the video. Keep in mind, your watermark image will not be cropped and will show up full size. We recommend a size of 160x50 saved as a transparent PNG.

                                  Usage

                                  
                                  			<!-- data-watermark example -->
                                  			<script 
                                  				data-watermark="//support.playwire.com/watermark.png"
                                  				data-watermark-url="//www.playwire.com"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-watermark example -->
                                  			

                                  Demo

                                  This player embed contains data-watermark="//support.playwire.com/watermark.png" which will set the a the transparent watermark image in the lower right corner of the player.

                                  data-force-flash="boolean"

                                  color Type: Boolean
                                  Description: Forces the video player to use Flash. If set to true HTML5 will not be used.

                                  Usage

                                  
                                  			<!-- data-force-flash example -->
                                  			<script 
                                  				data-force-flash="true"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-force-flash example -->
                                  			

                                  Demo

                                  This player embed contains data-force-flash="true" which will force the video player to use Flash.

                                  data-ad-tag="URL"

                                  color Type: String
                                  Description: The URL of the ad tag you would like to call.

                                  Usage

                                  There may be times when you want to run a specific ad tag on a specific video. Using the data-ad-tag attribute, you can easily associate an ad tag with a specific ad tag. In line highlighted in the code snippet below, you will see the attribute:

                                  
                                  			<!-- data-ad-tag example -->
                                  			<script 
                                  				data-ad-tag="//shadow01.yumenetworks.com/yvp/21/xml/211DaVuJgGj/vpaid_html5.xml"
                                  				data-config="//support.playwire.com/demos/config_embed_ad_tag.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / data-ad-tag example -->
                                  			

                                  Additionally, there are other attributes available to target certain devices, please see the table below:

                                  AttributeDescription
                                  data-ad-tagDefault ad tag that can be used for all cases: desktop, HTML5 and mobile devices.
                                  data-desktop-ad-tagIf Flash is supported by the desktop device, this ad tag will be used.
                                  data-html5-ad-tagIf Flash is not supported by the desktop device, this ad tag will be used.
                                  data-mobile-ad-tagIf the the user is using a mobile device, this ad tag will be used.

                                  Demo

                                  This player embed contains the data-ad-tag attribute which will call the specified ad tag.

                                  Bolt.getCurrentContent( player_id , function )

                                  Description: Using a proxy function, you are able to access the type of a video content the video player is playing. This getter only works after a user presses play on the video player. There are 2 types: ad -or- video.

                                  player_id Type: String
                                  Description: A string matching the data-id attribute of the player embed code
                                  function Type: Function
                                  Description: A proxy function passing in the id of the video player and the object, function( id, obj ).

                                  Usage

                                  If you are looking for a way to check if the player has autoplay set to true or false, try using the .autoplay getter. In the code snippet below, the the player with the data-id of "myPlayer" will be checked for the value of the autoplay setting.

                                  
                                  			Bolt.getCurrentContent( 'myPlayer' ,function( id, obj ){
                                  				console.log( id, obj );
                                  				content_type = obj.type;
                                  				console.log( 'Content Type - ' + content_type );
                                  			});
                                  			

                                  Code Example

                                  In this demo, after the user clicks the play button, the false value returned from .autoplay will be logged in the bolt-logger <ul>.

                                  
                                  
                                  			<!-- bolt_type example -->
                                  			<script 
                                  				data-onready="bolt_type"
                                  				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                  				data-height="100%"
                                  				data-width="100%"
                                  				data-id="myPlayer"
                                  				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                  				type="text/javascript">
                                  			</script>
                                  			<!-- / bolt_type example -->
                                  
                                  			<!-- bolt logger area -->
                                  			<p>Bolt Property Logger:</p>
                                  			<ul class="bolt-logger"></ul>
                                  			<!-- / bolt logger area -->
                                  
                                  			
                                  
                                  
                                  			function bolt_type(){
                                  				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function(){
                                  					Bolt.getCurrentContent( 'myPlayer' ,function( id, obj ){
                                  				  		console.log( id, obj );
                                  				  		content_type = obj.type;
                                  				  		console.log('Content Type - ' + content_type);
                                  
                                  				  		// log message to bolt logger ul
                                  						var message = '<li>Content Type is : ' + content_type + '</li>';
                                  						jQuery( '.bolt-logger' ).append( message );
                                  					});
                                  				});
                                  			}
                                  
                                  			

                                  Code Demo

                                  When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the type of the object.

                                  Bolt Property Logger:

                                    Bolt.getCurrentContent( player_id , function )

                                    Description: Using a proxy function, you are able to access the source file URL of the video content playing. This getter only works after a user presses play on the video player.

                                    player_id Type: String
                                    Description: A string matching the data-id attribute of the player embed code
                                    function Type: Function
                                    Description: A proxy function passing in the id of the video player and the object, function( id, obj ).

                                    Usage

                                    If you are looking for a way to access the source video URL, you can the .getCurrentContent() getter. In the code snippet below, the the player with the data-id of "myPlayer" will be passed into the function, with the object itself, allowing you to access the source.

                                    
                                    			Bolt.getCurrentContent( 'myPlayer' , function( id, obj ){
                                    				console.log( id, obj );
                                    				content_source = obj.source;
                                    				console.log( 'Content Source - ' + content_source );
                                    			});
                                    			

                                    Code Example

                                    
                                    
                                    			<!-- bolt_source example -->
                                    			<script 
                                    				data-onready="bolt_source"
                                    				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                    				data-height="100%"
                                    				data-width="100%"
                                    				data-id="myPlayer"
                                    				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                    				type="text/javascript">
                                    			</script>
                                    			<!-- / bolt_source example -->
                                    
                                    			<!-- bolt logger area -->
                                    			<p>Bolt Property Logger:</p>
                                    			<ul class="bolt-logger"></ul>
                                    			<!-- / bolt logger area -->
                                    
                                    			
                                    
                                    
                                    			function bolt_source(){
                                    				Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function(){
                                    					Bolt.getCurrentContent( 'myPlayer' , function( id, obj ){
                                    				  		console.log( id, obj );
                                    				  		content_source = obj.source;
                                    				  		console.log( 'Content Source - ' + content_source );
                                    
                                    				  		// log message to bolt logger ul
                                    						var message = '<li>Content Source is : ' + content_source + '</li>';
                                    						jQuery( '.bolt-logger' ).append( message );
                                    					});
                                    				});
                                    			}
                                    
                                    			

                                    Code Demo

                                    When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the source URL of the object, logging it to the bolt logger <ul>.

                                    Bolt Property Logger:

                                      Bolt.getCurrentContent( player_id, function )

                                      Description: Using a proxy function, you are able to access the current time of the video content playing. This getter only works after a user presses play on the video player. A number represented in seconds will be returned.

                                      player_id Type: String
                                      Description: A string matching the data-id attribute of the player embed code
                                      function Type: Function
                                      Description: A proxy function passing in the id of the video player and the object, function( id, obj ).

                                      Usage

                                      If you are looking for a way to access the source video URL, you can the .getCurrentContent() getter. In the code snippet below, the the player with the data-id of "myPlayer" will be passed into the function, with the object itself, allowing you to access the current time.

                                      
                                      			Bolt.getCurrentContent( 'myPlayer' , function( id, obj ){
                                      				console.log( id, obj );
                                      				content_type = obj.type;
                                      				console.log( 'Content Type - ' + content_type );
                                      			});
                                      			

                                      Code Example

                                      When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the source URL of the object, logging it to the bolt logger <ul>.

                                      
                                      
                                      			<!-- bolt_current_time example -->
                                      			<script 
                                      				data-onready="bolt_current_time"
                                      				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
                                      				data-height="100%"
                                      				data-width="100%"
                                      				data-id="myPlayer"
                                      				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
                                      				type="text/javascript">
                                      			</script>
                                      			<!-- / bolt_current_time example -->
                                      
                                      			<!-- bolt logger area -->
                                      			<p>Bolt Property Logger:</p>
                                      			<ul class="bolt-logger"></ul>
                                      			<!-- / bolt logger area -->
                                      
                                      			
                                      
                                      
                                      			function bolt_current_time(){
                                      				jQuery( '.btn-get-time' ).click( function(){
                                      					Bolt.getCurrentContent( 'myPlayer' ,function( id, obj ){
                                      						console.log( id, obj );
                                      						content_current_time = obj.currentTime;
                                      						console.log('Content Current Time - ' + content_current_time );
                                      
                                      						var message = '<li>Content source is :'+ content_current_time +'</li>';
                                      						jQuery( '.bolt-logger' ).append( message );
                                      					});
                                      				});
                                      			}
                                      
                                      			

                                      Code Demo

                                      When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the current time of the object.

                                      Bolt Property Logger: