Popular Searches:
Uploading, APIs, Creating Players, BEML
This HTML/JavaScript example illustrates the use of both the Video and the Ad Player APIs in combination with DoubleClick DART for Publishers (DFP) Video & Rich Media ads.
Essentially, it fulfills the following requirements:
This example serves ads from DFP Video & Rich Media ad network, which is available as an Ad Translator in our system. But the same code here can be used not only with this Ad Translator but with any of the other translators available in the Brightcove Advertising module.
There are four files included with this example:
You can download a zip file that includes these four files.
You can view the example here. Or, to deploy the example, download it and unzip it under a folder in a web server. Open DFPRichMediaExample.html and click on any video. You should see a pre-roll video ad being served. While that pre-roll ad is playing, you can click on the thumbnail of an image in the page, and the image will overlay the video player, pausing the ad. Click back on the video that was originally playing, and the video ad will resume.
Since we are using the Player API in this example, we enabled the APIs in the Publishing module for the player. You will need to do the same if you want to try this code with your own players.
Let's look at the main code elements in DFPRichMediaExample.html.
We use the onTemplateLoaded method to take care of the things that we need to set up before the user interacts with the video player. We need to set references to the API modules that we're going to use: the ContentModule, VideoPlayerModule and AdModule APIs. We'll use the ContentModule to request a video and then to load it into the player; the VideoPlayerModule to pause and resume video ads and content, and the AdModule to inspect the ad events being fired as an ad renders in the player.
Note that we are adding a listener for the the VIDEO_LOAD event. We need this since we won't know the video ID to load until the user clicks on a video, we then get the video by calling contentModule.getMediaAsynch() and passing the video ID. We need to know when that video is available to load it into the player. This event tells us when.
function onTemplateLoaded(player2){
player = brightcove.getExperience(player2);
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
content = player.getModule(APIModules.CONTENT);
content.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad);
adModule = player.getModule(APIModules.ADVERTISING);
adModule.addEventListener(BCAdvertisingEvent.AD_COMPLETE, onAdComplete);
adModule.addEventListener(BCAdvertisingEvent.AD_PAUSE, onAdPause);
adModule.addEventListener(BCAdvertisingEvent.AD_START, onAdStart);
adModule.addEventListener(BCAdvertisingEvent.AD_RESUME, onAdResume);
adModule.addEventListener(BCAdvertisingEvent.AD_PROGRESS, onAdProgress);
addPlayList();
}
The next thing we do in the onTemplateLoaded method is to create the playlist and add it dynamically to the HTML page, using our addPlayList() method. This HTML could have been hardcoded since we are using three videos from which we know their video ids. However, if you were adding a playlist from a result of the Media API, you would probably add them dynamically to the HTML page. So we wanted to include a starting point for that. The addPlayList() method creates an HTML div that displays a video thumbnail and includes the video id which is needed to load the video as the user select it from the playlist. It also includes the video thumbnail URL, which is hard-coded in this example, but which in a real application you could obtain by calling the Media API. We are also adding the two images included in this example to the playlist. Note that if you try this code with your own account, make sure to use your own video IDs. Videos will only play in a player of the same account.
Now let's see what happens when the user interacts with the player. When a user clicks on a video in the playlist, playTitleFromList() is called and it is passed a videoId. If no video is playing, we request that video using content.getMediaAsynch(). Once the video is ready to be loaded, the onVideoLoad() method is called, since we set this as a callback function for the VIDEO_LOAD event. We use videoPlayer.loadVideo() to load the video into the player and play it automatically. Alternatively, you could use videoPlayer.cueVideo(), which would load the video but would not play it automatically.
Any time that a video is selected, we load a new video if no video is loaded into the player, or if the user selects a different video. It could be also the case that an image is being displayed and we are switching back to a video that was originally paused because the user click on a image when the video ad or video content were playing. In that case, we resume the video ad or the video content.
You will notice that we are using two APIs from the VideoPlayer module that also work for ads. These are pause() and isPlaying(). They work in this case because we are playing a video ad. And we do not need extra code to check for video content versus ad content before calling them. The player takes care of that internally.
// handles click event from list items
function playTitleFromList(videoId){
var currentVideo = videoPlayer.getCurrentVideo();
if (currentVideo == null) {
content.getMediaAsynch(videoId);
return;
}
// Only fetch a new video if clicking
// in a different video if (currentVideo.id != id) {
content.getMediaAsynch(videoId);
}
else { // if switching back to the previous video
hideImage();
if (!videoPlayer.isPlaying()){
videoPlayer.pause(false);
}
}
}
// Load a video in the BC player.
function onVideoLoad(event){
videoPlayer.loadVideo(event.video.id);
hideImage();
}
The logic for overlaying an image over the Brightcove player can be found in displayImage() and showImage(). It makes the imageBox div visible or invisible as the user clicks on an image. The code shown here is only for demonstrations purposes and it does not use the Brightcove API. In order to overlay the image over the Brightcove player, we use the z-index and wmode opaque options. The z-index is defined in the displayTitles.css and the wmode is set in the player configuration parameters.
Finally, we trace out messages in the right upper corner for each of the Ad events (Ad start, pause, resume and complete) which are fired as the ad progresses. We set all of the callback functions to these events on the onTemplateLoaded method, as shown earlier. Here we show the code for displaying a message when an ad pauses or starts:
// Call when the video ad is paused.
function onAdPause(evt){
eventStatusMessage = eventStatusMessage + "Ad Paused. Position: " + evt.position + "\n";
document.getElementById('adOutputText').value = eventStatusMessage;
}
// Call when the video ad starts
function onAdStart(evt){
eventStatusMessage = eventStatusMessage + "Ad Started" + "\n";
document.getElementById('adOutputText').value = eventStatusMessage;
}