jeudi 14 novembre 2013

[jQuery] Kill video.js player when navigating in fancybox

Using video-js player (flash fall-back mode) in fancyboxes causes a javascript loop error, during medias navigation in fancybox. Here is the errors :
["Video.js: buffered unavailable on Flash playback technology element.", TypeError]
Uncaught TypeError: Object # has no method 'vjs_getProperty'
71
Uncaught TypeError: Cannot read property 'length' of undefined
The problem is that, when we move from a video to an image, for example, in fancybox popup, previous player tags and DOM objects are removed before that video.js kill the previous player (what he would do after and causes the error loop). The solution was to destroy the player in the fancybox beforeLoad event. The function that destroy the player :
function destroyPlayer() {
  if(typeof vjs != 'undefined' && 
     typeof vjs("player_video_flash_api") != 'undefined') {
     vjs("player_video_flash_api").dispose();
   }
}
And call it from fancybox code :
var defaultConfigs = {

  beforeLoad: function () {
    destroyPlayer();
  },

  beforeClose : function() {
    destroyPlayer();
  },
}
And you know how to init fancybox :
    $('.media').fancybox(defaultConfigs);

Aucun commentaire :

Enregistrer un commentaire