Using video.js in a jQuery UI dialog box has problems with the second video and repeated playback

advertisements

Context

I have a page which contains a bunch of links to jQuery UI Dialog boxes which then have video.js players within them.

Problem

When you click one of these links the first time, everything works perfectly.

It's when you click subsequent times that you run into issues. I've fixed the issue with opening up a second different video by making all of the ids unique.

However, it seems this doesn't help opening the same video a second time; so I even made those player's ids unique (see below the id propery for <video> containing both the hash of the video as well as a rand.

Defined Issue

What I see is happening is that once you close the dialog box the browser is continuing to download the video source. This means that subsequent dialog openings create more videos downloading and so on.

Questions

  1. How can I stop the video from downloading?
  2. Is there a better way of re-initiliazing than what I'm doing.
  3. Is there a better way of killing off the videos when someone hits the close button?

Code

The jQuery UI Dialog window is loaded with the following HTML

<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
       controls="controls" preload="auto" data-setup="{}"
       poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
    <source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
      data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
      <param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
        title="No video playback capabilities." />
    </object>
</video>

Javascript For the Dialog Box

video_play_click_event: function(event) {
    $.loading();
    $('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
      $.loading();
      $this = $(this);
      $this.dialog({
        width: 320,
        height: 400,
        modal: true,
        buttons: {
          Close: function() {
            $(this).dialog( "destroy" );
          },
        },
        open: function(event, ui) {
            id = $(this).find('.video-js:first').attr('id');
            _V_(id);
            $(this).css({overflow: 'hidden', padding: '0'});
        },
        beforeClose: function() {
            $('.video-js').player().pause();
            $('.video-js').remove();
        }
      });
    });
    return false;
  }


I don't know if this is the correct answer to solve this; however, I ended up changing my javascript to look like the following.

The secret was setting src="" to get the browser to stop buffering. This throws a video error on the console which I really don't like; but for now it works.

video_play_click_event: function(event) {
    $.loading();
    $('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
      $.loading();
      $this = $(this);
      $this.dialog({
        width: 320,
        height: 400,
        modal: true,
        buttons: {
          Close: function() {
            $(this).dialog('close');
          },
        },
        open: function(event, ui) {
            id = $(this).find('.video-js:first').attr('id');
            _V_(id);
            $(this).css({overflow: 'hidden', padding: '0'});
        },
        beforeClose: function() {
            $('.video-js').player().pause();
            $('.video-js video').attr('src', '');
            $('.video-js').remove();
        }
      });
    });
    return false;
  }