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.
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.
<!-- Basic embed example -->
<script
data-config="https://support.playwire.com/configs/config_non_ad_video.json"
data-height="100%"
data-width="100%"
src="//cdn.playwire.com/bolt/js/zeus/embed.js"
type="text/javascript">
</script>
<!-- / Basic embed example -->
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="https://support.playwire.com/configs/config_spotx.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, 100);
function checkForBolt(){
console.log('%cChecking for Bolt object', 'background: yellow;');
if( typeof Bolt !== 'undefined'){
window.clearInterval(timer); // clear interval timer
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;');
}
}
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="https://support.playwire.com/configs/config_spotx.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' );
});
}
}
Description: Resizes the video player to a specified dimension.
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' );
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 );
});
Use the dropdown to change the size of the player
Description: Makes the video player enter or exit full screen mode based on boolean provided.
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 );
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="https://support.playwire.com/configs/config_non_ad_video.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 );
});
Click the Set Fullscreen button to make the video player enter fullscreen mode.
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.
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 );
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="https://support.playwire.com/configs/config_non_ad_video.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 );
});
Use the dropdown to seek to a time in the video:
Description: Mutes player audio, effectively setting the volume of the video player to 0. No audio will be heard by the user.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
Click play and then the Mute Video button to mute the audio of the video player.
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.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
Click play and then try clicking the Mute Video button and then Unmute Video.
Description: Sets the volume level of the specified video player. The video player must be playing to use this method.
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 );
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="https://support.playwire.com/configs/config_non_ad_video.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 );
});
Use the dropdown to change the volume of the player:
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.
Using the replayMedia() method, the code snippet below replays the video player with the data-id of myPlayer.
Bolt.replayMedia( 'myPlayer' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
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.
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.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
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.
Description: Pauses an actively playing video player. If video player is already paused, pauseMedia() will not do anything.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
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.
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.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
Click the Play Media button to start video playback.
Description: Removes the video object and/or the video container from the DOM depending on the boolean passed
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 );
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="https://support.playwire.com/configs/config_non_ad_video.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 );
});
Click the Remove Video and Remove Container buttons to experience the difference in behavior between sending true and false.
Description: Renders the player onto the web page when setting the data-autoload attribute to false. This method can only be called once.
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' );
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="https://support.playwire.com/configs/config_non_ad_video.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' );
});
Click the Render Player button to render the player to the DOM.
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');
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_AD_REQUEST_START events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_AD_STARTED events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/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>' );
});
}
Press play to watch the BOLT_AD_ERROR events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
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:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_FIRST_QUARTILE events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_MIDPOINT events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_THIRD_QUARTILE events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_AD_COMPLETE events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/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>' );
});
}
Press play to watch the BOLT_AD_CUEPOINT events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_CONTENT_STARTED events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_spotx.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>' );
});
}
Press play to watch the BOLT_CONTENT_STATE_CHANGED events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/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>' );
});
}
Press play to watch the BOLT_CONTENT_ERROR event fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_content.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>' );
});
}
Press play and scrub to the end of the video to watch the BOLT_CONTENT_COMPLETE event fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_content.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>' );
});
}
Press play to watch the BOLT_TOGGLE_FULLSCREEN events fire.
Bolt Event Logger:
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' );
});
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="https://support.playwire.com/configs/config_content.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>' );
});
}
Press play to watch the BOLT_VOLUME_CHANGED events fire.
Bolt Event Logger:
<!-- 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 -->
This player embed contains data-active-color="0x00FF00" which will set the active color to lime green.
<!-- data-background-color example -->
<script
data-background-color="0x00FF00"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
This player embed contains data-background-color="0x00FF00" which will set the background color to lime green.
<!-- data-foreground-color example -->
<script
data-foreground-color="0x00FF00"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
This player embed contains data-foreground-color="0x00FF00" which will set the foreground color to lime green.
<!-- data-autoload example -->
<script
data-autoload="true"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
This player embed contains data-autoload="true" which will render the player at runtime.
<!-- div video player will be injected into -->
<div id="my-player-container"></div>
<!-- data-container example -->
<script
data-container="my-player-container"
data-config="https://support.playwire.com/configs/config_spotx.json"
data-height="100%"
data-width="100%"
src="//cdn.playwire.com/bolt/js/zeus/embed.js"
type="text/javascript">
</script>
<!-- / data-container example -->
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 example -->
<script
data-id="myPlayer"
data-config="https://support.playwire.com/configs/config_spotx.json"
data-height="100%"
data-width="100%"
src="//cdn.playwire.com/bolt/js/zeus/embed.js"
type="text/javascript">
</script>
<!-- / data-id example -->
This player embed contains data-id="myPlayer" which will allow you to target this specific player using Player methods, events and properties.
<!-- data-config example -->
<script
data-config="https://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-config example -->
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 example -->
<script
data-height="360px"
data-width="640px"
data-config="https://support.playwire.com/configs/config_spotx.json"
data-id="myPlayer"
src="//cdn.playwire.com/bolt/js/zeus/embed.js"
type="text/javascript">
</script>
<!-- / data-height example -->
This player embed contains data-height="360px" which will set the active color to lime green.
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.
<!-- data-width example -->
<script
data-width="640px"
data-height="360px"
data-config="https://support.playwire.com/configs/config_spotx.json"
data-id="myPlayer"
src="//cdn.playwire.com/bolt/js/zeus/embed.js"
type="text/javascript">
</script>
<!-- / data-width example -->
This player embed contains data-width="640px" which will set the player's width to 640px.
<!-- data-onready example -->
<script
data-onready="my_function"
data-config="https://support.playwire.com/configs/config_spotx.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!' );
}
This player embed contains data-onready="my_function" which will call the function my_function().
<!-- data-volume example -->
<script
data-volume="0"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
This player embed contains data-volume="0" which will set the volume to 0.
<!-- data-watermark-url example -->
<script
data-watermark-url="//www.playwire.com"
data-watermark="//support.playwire.com/watermark.png"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
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 example -->
<script
data-watermark="//support.playwire.com/watermark.png"
data-watermark-url="//www.playwire.com"
data-config="https://support.playwire.com/configs/config_spotx.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 -->
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 example -->
<script
data-force-flash="true"
data-config="https://support.playwire.com/demos/forceFlash.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 -->
This player embed contains data-force-flash="true" which will force the video player to use Flash.
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:
Attribute | Description |
---|---|
data-ad-tag | Default ad tag that can be used for all cases: desktop, HTML5 and mobile devices. |
data-desktop-ad-tag | If Flash is supported by the desktop device, this ad tag will be used. |
data-html5-ad-tag | If Flash is not supported by the desktop device, this ad tag will be used. |
data-mobile-ad-tag | If the the user is using a mobile device, this ad tag will be used. |
This player embed contains the data-ad-tag attribute which will call the specified ad tag.
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.
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 );
});
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="https://support.playwire.com/demos/propertiesConfig.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 );
});
});
}
When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the type of the object.
Bolt Property Logger:
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.
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 );
});
<!-- bolt_source example -->
<script
data-onready="bolt_source"
data-config="https://support.playwire.com/demos/propertiesConfig.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 );
});
});
}
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:
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.
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 );
});
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="https://support.playwire.com/demos/propertiesConfig.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 );
});
});
}
When the user presses play, the BOLT_CONTENT_STARTED event trigger a function to access the current time of the object.
Bolt Property Logger: