CODEWITHSUNDEEP
setmediaelement.jsrc
Standard Ease
Standard Ease

Reputation: 21

mediaelement.js multi video gallery flash fallback

Does anyone have a URL of a successful multivideo gallery using mediaelement.js where the same instance of MediaElementPlayer is reused and have it working with the Flash fallback for IE8 & 7?

I have partial success changing the setSrc as a function after the new MediaElementPlayer is created for the first time. This is robust for the HTML5 component but failing for the flash fallback. setSrc is consoling as not available in IE8 & 7. It fails to recognise the object.

Moving the setSrc to the "success" part of the new MediaElementPlayer does load the Flash fallback and HTML5 video as expected. On attempting to change the source of the player I have attempted to "destroy" and recreate the MediaElementPlayer object on the fly without success. I have not declared player using var=player so reasonably have expected to delete it but without success:

player = false;
delete player;

//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', {
   pluginPath: ''+basePath+'_Includes/JS/',
   success: function (player, node) {
   //set the size (for flash otherwise no video just sound!)
   if($("#rg-gallery.smallGallery").length > 0){
        player.setVideoSize(400, 225);
   } else{
        player.setVideoSize(640, 360);
   }
   player.setSrc([   
      { src: mp4, type: 'video/mp4' },
      { src: webm, type: 'video/webm' }
   ]);       
   player.load();
   player.pause();


   //if the video plays stop the slideshow
      player.addEventListener('play', function () {
      videoPlaying.push('playing');
      stopSlideshow();
      }, false);
   }
});

Research both here and on the web shows that others are attempting to try this type of dynamic gallery but I am unable to find an example that shows it as technically viable.

Any example URLs where someone's cracked it would be lovely. Thanks :)

Upvotes: 1

Views: 1820

Answers (1)

Standard Ease
Standard Ease

Reputation: 21

Solved.

Created a JS variable of video code:

var playerView = '<video width="640" height="360" id="videoPlayer" class="video-js vjs-default-skin" poster="" controls preload="auto"><source id="mp4" type="video/mp4" src="" /><source id="webm" type="video/webm" src=""  /></video>';

On initialization removed any DOM rendering of any existing player, set it to false and deleted it:

//remove any existing video player
$(".mejs-container").remove();
player = false;
delete player;

Appended new video view to DOM:

//add a new one
$(".rg-video").append(playerView);

Created new instance of player and set src and load as normal:

//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', { ...

HTML5 video and Flash video fallback for IE8 & 7 now working as part of dynamic mixed media gallery.

Off for tea and medals.

:)

Upvotes: 1

Related Questions