Tag Archives: video

Brightcove Embed Code and Events

10 Mar 2016

Another unique thing for me today – this time getting the Brightcove media player playing in a CBT that we’re developing. I originally setup the framework for this project and handed it off to other developers to complete but it has come back around to me since incorporating the Brightcove video player turned out to be problematic.

When the project landed back at my desk the video wasnt working and the PM was waiting for the client to send over the Brightcove iFrame code (the client didnt reveal they had a brightcove account until later). The iFrame was easy to setup but the assumption that it was what the project required was wrong – we’re hiding the navigation thereby forcing the end-user to watch the video which means we need to register some sort of “video end” event so that we know when to re-enable the UI. Since the iFrame’s source came from another domain we of course ran afoul of the cross domain policy preventing any interaction with the iFramed contents.

Digging into Brightcove’s docs I saw the “embed” option and started down that path: first, I needed to embed the code, next I needed to register the desired event.

Embed the Video HTML

I didn’t see the Brightcove console but from what the client gave us I could tell that there must be a section that provies sample embed code. You will want that code as it contains the Video ID (UID for the video), Account number (your Brightcove account), and the Player value (tells the Brightcove JS which video tag to use).

  

For my specific implementation the above was kept in an external HTML template file. I then pulled it and updated the necessary values. Once the HTML was ready to be inserted a simple $(‘#my-element-ID’).html(template-code-here) added it to the page.

Note that the video ID should must be inserted into the above for this to work (well, for this particular way of doing things) as it tells the Brightcove JS what video to use. What happens next is that we create a video player instance.

Init the Video

Per the Brightcove docs they create a script element, assign values to various properties and then add it to the page. A few things to note:

  1. We need to know when the Brightcove script has loaded
  2. We need to create a reference to the video player
  3. We need to assign a callback to the video player’s ended event

So with that in mind here’s the function I wrote (note the comments).

...
  var bc = function(accountID,playerID){
    var that = this;
    this.mPlayer = null;
    this.brightcove = {
      accountId : accountID, // your account ID here
      playerId : playerID // your player ID here
    }

    function addBrightCoveScript(){
      // create the element
      var s = document.createElement('script');

      // add the element to the page
      $('#my-wrapper').append(s);

      // set the onload
      s.onload = function(e){

        // the script has loaded, now lets detect the video player instantiation
        videojs('mPlayer').ready(function(){

          // cool, we know that the video player exists, lets get a reference to it
          that.mPlayer = videojs('mPlayer');

          // using the reference lets add a listener, in this case we are listening for the "ended" event
          that.mPlayer.one('ended',function(e){
            // the video has ended - do something here  
          });
        });
      };

    // now update the script tag
    s.src = '//players.brightcove.net/' + that.brightcove.accountId + '/' + that.brightcove.playerId + '_default/index.min.js';
  }
...

You will see what appears to be a typo: that.mplayer.one. The “one” is not a typo, per the Brightcove API registering an event with the “one” method will result in the listener detecting the event a single time. When that happens the listener removes itself thereby relieving me of the burden of doing it myself.

Following the above you should be good to go for modern HTML5-capable browsers.

Playing Audio in Android/iOS Web Apps

11 Sep 2012

If you’re familiar with the state of HTML5 in Android land you know that many CSS3 features are not supported, among them is the AUDIO tag. There is a library out called SoundManager2 that claims to offer a “reliable cross-platform audio” solution but after trying it on mobile platforms I think it falls short of that promise.

SoundManager 2’s approach is to use HTML5 where possible with Flash as a fallback mechanism. Makes sense for desktop OS’s, not so much for mobile. iOS, even with its own quirks (no inline playing, no autoplay, etc) has functional HTML5 audio/video so that’s not much of an issue. Android is very different in that the HTML5 AUDIO tag is not implemented. Flash exists on Android but that has its own issues, among them: we are forced to assume that the Flash Player exists on the Android device in the first place which isn’t always the case. Add to that the fact that many users have to install the Flash Player manually on their devices as there is an absence of any auto-install capability. The final nail in that coffin is Adobe’s abandonment of the Android Flash Player altogether meaning no one can install it.

SoundManager 2 can no longer claim to be useful for mobile when its completely unusable on Android. Maybe when a version of Android with HTML5 Audio support takes the lion’s share of the Android ecosystem SoundManager 2 may again have use within the mobile space.

In any event, as mentioned, the lack of HTML5 AUDIO tag support continues to make supporting sound in Android Web Apps a challenge. The solution I’ve come up with (not that its a novel one) is to use the HTML5 VIDEO tag instead. VIDEO has support at least back to Android 2.2. Most events are supported though some don’t do quite behave in the manner that you would like for them to which makes the creation of a custom audio player somewhat of a challenge. In the end you may just have to bail on some lofty ideas/features that you may have for your own custom player but at least you can still get some sound working reliably.

It has been said that you can in fact feed the VIDEO tag an MP3. However, what happens within Android differs across its varied flavors. In Android 2.2 what will happen is that Android will not play the audio in-page but instead launch the native media player – and what you have is a black screen, devoid of controls albeit with your MP3 playing. In Android 4 you can get MP3 audio to work inline.

Due to the different behaviors and presentations between Android versions I’ve personally switched to using video files(mp4) to deliver sound. The result is that in Android 2.2 the native media player will display the video content – an image keyframed every second – which satisfies some mystery requirement that allows the on-screen controls to appear. This is much better than a black screen. On Android 4 we don’t care about the visual aspect of the video because my implementation avoids it entirely.

The concept is to use single VIDEO tag that is placed off-screen, use Javascript to change its src and control the sound via the relevant HTML5 media events.

It is important to note that some VIDEO tag attributes are necessary for this to work as without them you’ll be greeted by silence. Below is the HTML to use:

...

...

The autobuffer is there because it can’t hurt. The one thing that is necessary is the presence of the video controls (yes, even though you won’t see them). Otherwise this is all pretty simple – you can see that the VIDEO tag is placed off screen.

I won’t post my complete setup as thats a bit of code, however, here’s a great start; first some HTML to be styled however you like:

...
  • This is song number one
  • This is the second song
  • Number three
  • The last song
  • Just a list item, no video/sound to play here
...

In this case I’ve elected to keep the URL to the video in the LI tag. Here’s my JavaScript that utilizes the above, populates the VIDEO src, and controls the VIDEO (our sound):

...

var videoPlayer = (function(){
  var _isPlaying = false;
  var _elTarget;
  var _video;
  function _resetAllVideoStyles(){
    var lists = document.getElementsByTagName('ul');
    for (var i=0;i

As you can see events are bound to all qualifying LI tags - the qualifier being that the parent UL must have a class called "music_list" assigned to it.

Thats a decent start for you - all the events are setup - you will quickly see that they don't really fire when you expect them to. For example, the onplay event seems to start as the video is buffering, not when the video actually starts to play. ondurationchange may fire more than once - etc.... so as i mentioned before making a slick UI will be a bit of a chore. One thing that should be useful, though granted maybe not a cureall is the video.paused property. At least you will know when the video is playing or not, but as I already noted the video is considered playing when what I believe based on observation is buffering and not actual playing.

As far as iOS the video does not play inline, rather, the native video player will come up full screen. This happens because contrary to every other mobile browser Apple has decided in its totalitarian wisdom to buck the standard and suspend the mobile app in favor of its built-in media player. That's a rather ironic tactic IMO as they profess to be on the side of HTML 5 & standardization but as usual they change the game per their whim and there's nothing that can be done about it. Apple gives no explanation for this so it is what it is.

So that's about - doing the above gets you something that works on both major mobile OS's - Android with its caveats, and iOS with its mobile media player hijacking the

Center Rich Media Annotation in Acrobat 10

04 Jun 2012

I discovered today that its possible to center a Rich Media Annotation in Acrobat 10. A “Rich Media Annotation” is Adobe’s fancy way of referring to a video or embedded flash movie. The significance of this is due to the fact that there currently is no way to do this within Acrobat Professional. You will have to edit the uncompressed PDF in a text editor and drop in some code per instance of your rich media item. You’ll want to use a decent text editor such as Notepad++ or Ultraedit.

I’m assuming that you have already placed your video in your PDF and that it is set to be a floating video.

First thing that you need to do is to save the PDF in question as an uncompressed PDF document. To do this, open up the Tools Pane by clicking on the “Tools” button. Next, click on the “Print Production” button to expand its contents and then finally click on the button labeled “Preflight”.

After the “Preflight” window opens you will need to click on the “Select Single Fixups” buttons which looks like a wrench icon as noted below:

Once the “Select Single Fixups” icon has been clicked the window will update with a list of new options. Click the “Document” row to expand its contents then locate the line that says “Remove document structure compression”.

Finally you’re ready to apply the fixit – click the “Fix” button in the lower right corner and you will have the opportunity to save the uncompressed PDF.

Next, open the uncompressed PDF in your text-editor of choice – I’ll be using Notepad++.

After the XML at the top of the document you’ll want to pay attention to the PosScript tags. The tags start with a forward slash. You can indent or put a newline before the tag – so code formatting is ok but is largely absent as you will see.

There is a construct referred to as a dictionary object. It is identified by opposing double less than/greater than signs which itself contains tags and values. A sample dictionary object might appear like so:

  /Name<>

With that said we have a new tag/dictionary object to add to each video instance within our uncompressed PDF document. The code that we’ll be adding is the following:

/Position 
<< /Type /RichMediaPosition
   /HAlign /Center
   /VAlign /Center
   /HOffset 0
   /VOffset 0
>>

So what we need to do to add our new tag is to insert it into the right place in the document. Start by doing a search for the “RichMediaSettings” tag – this is the tag that we will be adding our new tag to.

You’ll notice that that RichMediaSettings starts with a dictionary object and that there are a series of nested commands/dictionary objects and is a bit hard to read.

Since newline characters and padding are ok, I’ll do some quick formatting to help us make sense of what we’re looking at – we are realy only concerned with finding the “height” and “width” of the Rich Media Annotation (the video in this case) because that marks where our new code will go.

You don’t have to format your code in this manner, but it does make things easier to see. What we want to do is to past our new “Position” tag after the “Width” tag.

Hilite the block of code that I mentioned above and paste it after the “Width” tag like so:

Thats it – do a search for more Rich Media items in your document, if there are any as you will need to repeat the above paste for each instance of RichMediaSettings.

Next, save the file, then open in Acrobat and try things out. The video/Rich Media Annotation should launch centered on the screen. The very last thing to do is to compress your PDF – to do so just save it as a new PDF and Acrobat will apply the default compression settings.

Note that if you edit the video within Acrobat Pro (i.e., right-click, properties then change a setting) that the code we pasted in will be removed and you will need to manually reinsert it.