Referencing an HTML Player using a JavaScript Plug-In

This topic provides a sample of a JavaScript plug-in for the HTML version of the smart player. The sample plug-in gets a reference to the player and listens for events.

Video Cloud offers support for creating plug-ins to add functionality to your player templates as well as your Smart Player API and BEML solutions. Referencing plug-ins from Video Cloud players allows you to code functionality once and tie it to a player wherever it appears, rather than coding individually in every page hosting that player.

Video Cloud smart players detect their environment, and serve videos using Flash players where supported and installed, or otherwise serve videos using HTML players. Developing a plug-in solution for smart players requires a plug-in file in the SWF format for the Flash mode of the smart player as well as a plug-in file in JavaScript for the HTML mode of smart player. You can add your SWF plug-in files and your JavaScript plug-in files to the smart player for Smart Player API solutions by adding the URL of the plug-in to your player settings through the Publishing module of the Video Cloud Studio. Likewise, you can include references to your SWF and JavaScript plug-in files in your player customized with BEML by adding the path to the plug-in files in the BEML module.

You can deliver your Smart Player API solutions by referencing plug-ins as an alternative to including Smart Player API code to the page hosting your player or in combination with the code in the page. When considering when to code in-page and when to reference plug-ins for smart players, note that JavaScript plug-ins embed in the iFrame of the player and travel with the player, eliminating the need to code every page where the player appears. JavaScript plug-ins also support binding in BEML for HTML players. A good rule of thumb is to code in-page when developing solutions unique to a single page, and use plug-ins for solutions applied to multiple players. For more on code requirements and implementation steps for using the JavaScript plug-ins with the HTML version of the smart player, see Adding Functionality to Smart Players using Plug-Ins.

Sample JavaScript plug-in

The following sample plug-in gets a reference to the player and listens for events:

Remember, for a complete solution, Video Cloud smart players require two separate plug-ins, one for the HTML mode, and one for the Flash mode of the smart player

Here is the the JavaScript plug-in code:

(function() {
    console.log("************ mediaEventPlugin.js has loaded ******************");
    
    function onPlayerReady() {
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, mediaBeginEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.CHANGE, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.STOP, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.SEEK_NOTIFY, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.MEDIA_ERROR, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, mediaEventHandler);
        videoPlayer.addEventListener(brightcove.api.events.CuePointEvent.CUE, cuePointHandler);
    }// Show video and rendition info here since BEGIN fires once and only once per video.
    function mediaBeginEventHandler(pEvent) {
        mediaEventHandler(pEvent);
        showCurrentVideo();
        showCurrentRendition();
    }
 function mediaEventHandler(pEvent) {
        console.log("EVENT: " + pEvent.type + " fired.  Video position: " + pEvent.position);
    }
 function cuePointHandler(pEvent) {
        console.log("EVENT: " + pEvent.type + " fired (" + pEvent.cuePoint.time + ", " + pEvent.cuePoint.metadata + ")");
    }
 function showCurrentVideo() {
        var video = videoPlayer.getCurrentVideo();
        console.log("--------------");
        console.log("Current Video:");
        console.log("--------------");
        showObject(video);
    }
 function showCurrentRendition() {
        var rendition = videoPlayer.getCurrentRendition();
        console.log("------------------");
        console.log("Current Rendition:");
        console.log("------------------");
        showObject(rendition);
    }
 function showObject(pObject) {
        for (var item in pObject) {
            console.log("  " + item + " = " + pObject[item]);
        }
    }
 player = brightcove.api.getExperience();
    videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    experience = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
 if (experience.getReady()) {
        onPlayerReady();
    } else {
        experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, onPlayerReady);
    }
}());

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments