Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Breaking News Plugin

This example plugin shows a bar with text at the top of the video display. The text inside this bar can be updated while the video is playing. The plugin showcases how to manage a hybrid ActionScript/JavaScript plugin and how to expose a public API.

Demo

 

Plugin Code

Inside the plugin template, there are two functions that build the news bar. First, player.onReady() inserts the configured text. Second, this.resize() styles the news bar. Both functions are called automatically by the player during the initialization.

Every function that uses the this. signature can be publicly called. Therefore, this.setBreakingNews() defines an API call for the plugin. It has one parameter, the text to insert.

The registerPlugin() call links to both the plugin template and the SWF file that contains the Flash version of the plugin. In HTML5 mode, only the template is loaded, in Flash mode both are loaded. The player.getRenderingMode() calls inside the template make sure that the javascript plugin doesn't duplicate the rendering of a textfield.

(function(jwplayer){

  var template = function(player, config, div) {
    
    function _setup() {
        div.innerHTML = config.html;
    };
    player.onReady(_setup);
    
    this.setBreakingNews = function(text) {
        if(player.getRenderingMode() == 'flash') {
            var swf = document.getElementById(player.id)
            swf.setBreakingNews(text);
        } else { 
            div.innerHTML = text;
        }
    };
    
    this.resize = function(width, height) {
        if(player.getRenderingMode() == 'flash') {
            _style(div, { display:'none' });
        } else { 
            _style(div, {
                background: 'black',
                color: 'white',
                lineHeight: '46px',
                opacity: 0.6,
                textAlign: 'center',
                width: width+'px'
            });
        }
    };
    
    function _style(element,styles) {
        for(var property in styles) {
          element.style[property] = styles[property];
        }
     };
    
  };

  jwplayer().registerPlugin('breakingnews', template,'breakingnews.swf');

})(jwplayer);

Essentially, the functionality of the JavaScript plugin is duplicated in the ActionScript plugin. Duplication is usually not neccessary, but it does allow plugin elements to be visible in fullscreen mode too. Additionally, you could imagine certain plugins that offer basic functionalities in JavaScript, while providing a richer, better performing featureset in ActionScript.

Embed Code

On to the embed code. The player embedding is similar to embeds with other plugins: the plugin is defined in a plugins block, is loaded from the local server and contains one option: the news text.

In addition to the plugin, a small form + JavaScript snippet is printed. The form allows one to insert a text and submit it to the script. The script calls the public API from the plugin by using the jwplayer.getPlugin() call.

<div id="player"></div>
<script type="text/javascript">
   jwplayer('player').setup({
    flashplayer: '../assets/player.swf',
    file: '../assets/bunny.mp4',
    height: 270,
    image: '../assets/bunny.jpg',
    plugins: {
      './breakingnews.js': {
          text:'Breaking news: Charlie Sheen is winning .. again!'
      }
    },
    width: 480
  });
</script>

<form onsubmit="return setNews();" style="margin-top: 40px">
    <input type="text" id="text" value='Breaking news: Justin Bieber started shaving!' style="width:400px"/>
    <button type="submit">set</button>
</form>
<script type="text/javascript">
  function setNews() {
      jwplayer().getPlugin('breakingnews').setBreakingNews(
        document.getElementById('text').value
      );
      return false;
  };
</script>

Again, don't forget to also load jwplayer.js, in the <head> of your page!