Fix to reuse HTML5 tech

[eXon]

Two bugs were existing for Video.js when you were trying to change the tech back to HTML5.

1. The
2. The duration / volume of the player were not updated when we switch back to the HTML5 tech.

See http://jsbin.com/ocOrogAT/4 (http://jsbin.com/ocOrogAT/4/edit)

1. The first Html5 video is playing correctly.
2. The first Youtube video is playing correctly.
3. The second Html5 video is playing outside the DOM
4. The second Html5 video has the wrong duration (hasn't been updated)

If you know a smarter way to fix it, let me know. The way to fix the duration/volume looks pretty hackish to me.

(related to videojs/videojs-youtube#45)

[heff]

Awesome, thanks!

So to expand on the first issue, the HTML5 tech defaults to using the original video tag used to set up the player, which already exists in the dom. When you unload the HTML5 tech, it strips the tag out of the dom and disposes of the HTML5 video tech, but maintains the player.tag reference so the original tag isn't cleaned up. When the HTML5 tech is initialized again, it uses player.tag as its element, which now isn't in the dom. So another way to fix this would be to kill player.tag when the html5 tech is disposed. I'm pretty sure that wouldn't break anything else but not 100% positive.

Actually, looking into it deeper, this issue appears to be a breakdown in the logic here: https://github.com/videojs/video.js/blob/v4.3.0/src/js/player.js#L248

  if (this.tech) {
    this.unloadTech();

  // if this is the first time loading, HTML5 tag will exist but won't be initialized
  // so we need to remove it if we're not loading HTML5
  } else if (techName !== 'Html5' && this.tag) {
    vjs.Html5.disposeMediaElement(this.tag);
    this.tag = null;
  }

If anything other than the html5 tech is loaded first, player.tag gets nulled. But if html5 is loaded first, then something else, then html5 again, player.tag is never nulled. I think this could be fixed just by removing the else, so the second conditional happens on every tech load, not just the first.

Could you try that out and see if it meets your needs?

As far as the point on durationchange, if I just change the source within the html5 tech the durationchange is fired.
video.js: http://jsbin.com/IHOlIveZ/1/edit
video tag: http://jsbin.com/imoLIber/2/edit

But apparently not when the tech switches, so there may be a better way to fix that, like making sure that event listeners are applied before the source is set?

[heff]

Yeah, I have a feeling the duration issue could be fixed by moving setupTriggers to right after the element is created.

vjs.Html5 = vjs.MediaTechController.extend({
  init: function(player, options, ready){
    ...
    vjs.MediaTechController.call(this, player, options, ready);
    this.setupTriggers();
    ...
  }
});