Videos are interrupted in a slide-show

[acwolff]

If I have an album with both videos and images like in this test album and I start the slide-show with a short playing time for example 3s, videos with a longer playing time are interrupted before the movie is finished.

An easy solution would-be to pause the slideshow if a video is encountered and to forbid autoplay of video’s. The viewer decides in that case to play the video and start the slideshow immediately or after hè is ready viewing the mooie.

Is this possible?

[acwolff]

Well I got no reply, so I had to invent a solution.
I use now this code:

var FancyBoxIsOpen = false;
var FancyBoxInstance = $.fancybox.getInstance();
var slideType = '';  // 'image' 'iframe' 'video' 
var mp4Video= false;
var slideshowWasOn= false;

function initFancyBox() {
 $('[data-fancybox="S"]').fancybox({
    onInit : function() {
		FancyBoxIsOpen = true;
		FancyBoxInstance = $.fancybox.getInstance();
    },
    beforeShow : function() {    
	 slide_index= this.index;
		slideType = this.contentType;
		if (slideType === 'video') {
                    slideshowWasOn = FancyBoxInstance.SlideShow.isActive;
                    if (slideshowWasOn) FancyBoxInstance.SlideShow.toggle();
		}
    },
    afterShow: function() {
		var obj=this.$content.find('video');
		if (slideType === 'video') {
			obj.on('ended', function() {
				if (slideshowWasOn) FancyBoxInstance.SlideShow.toggle();
				FancyBoxInstance.next(100);
			});
		}
    },

To see it in action open this test album and click the Play button (2nd button in the upper left corner).
This album has been made with my jAlbum FancyBox skin.

It works fine on a. PC, but on a mobile device like an iPad, the video sometimes does not start automatically in a slideshow.
I see this as a work-around, I hope that in the next version this will be solve in the standaard fancyBox library, because in the current version it is impossible to show video’s in slideshow.

[acwolff]

This code is still required in version 3.4 I think, correct?

[fancyapps]

Hi,

Slideshow now waits for html5 video to end (starting from v3.4.1)

[acwolff]

Nice, but what about YouTube and Vimea videos?

[fancyapps]

Unfortunately, it is not so simple. It would be necessary to use each video vendor API to make it work. For example, Youtube - https://developers.google.com/youtube/iframe_api_reference

Currently, fancybox avoids loading external scripts and does simple iframe embedding for videos, therefore it can not detect video status.

[acwolff]

Well, I use now with version 3.4 this code:

 $('[data-fancybox="S"]').fancybox({
	onInit : function() {
		FancyBoxInstance = $.fancybox.getInstance();
    },
    beforeShow : function() {
		slide_index= this.index;
		slideType = this.contentType;	
		if (slideType === 'video') {
			slideshowWasOn = FancyBoxInstance.SlideShow.isActive;
			if (slideshowWasOn) FancyBoxInstance.SlideShow.stop();
		}
    },
	afterShow: function() {
		var obj=this.$content.find('video');
		if (slideType === 'video') {
			obj.on('ended', function() {
				if (slideshowWasOn) FancyBoxInstance.SlideShow.start();
			});
		}
    },
	slideShow: {
        autoStart: false,
        speed: viewtime
	},
	onSlideShowChange : function(instance, current, active) {
		if ( active ) {
			instance.next();
	}
	},	
    buttons : ['slideShow','close']
}); 

and this works fairly well as you can see in this album: https://andrewolff.jalbum.net/TestVideos_FB1/

Only the YouTube and Vimeo videos do not continue automatically at the end of the video.

[acwolff]

I did test with version 3.4.1 this code:

 $('[data-fancybox="S"]').fancybox({
	onInit : function() {
		FancyBoxInstance = $.fancybox.getInstance();
    },
 beforeShow : function() {
	slide_index= this.index;
	// slideType = this.contentType;			
	// mp4Video= ((this.contentType === 'video') && (this.type === 'video'));		
	// if ((slideType === 'video') && !mp4Video) {
	// 	if (FancyBoxInstance.SlideShow.isActive) FancyBoxInstance.SlideShow.stop();
	// }
    },
slideShow: {
        autoStart: false,
        speed: viewtime
},
onSlideShowChange : function(instance, current, active) {
   if ( active ) {
	instance.next();
    }
},	
buttons : ['slideShow','close']
}); 

This works only correctly if you use mp4 video files, but I can't use this code because YouTube and Vimeo files are now interrupted before the video is ready as you can see in this album: https://andrewolff.jalbum.net/TestVideos_FB2/

So I have to add the outcommented code for YouTube and Vimea videos.

[fancyapps]

I really did not want to boost file size by including this functionality, but after some thinking I decided to include. You can preview it here - https://codepen.io/fancyapps/pen/JayEMa?editors=1010

Actually, the gallery always moves to next item after video ends, I have not yet decided to make it optional or not.

[acwolff]

This looks great!
Available in the next version?
If the slideshow is on, it is logical that the gallery moved to the next item if the video ends!
No need to make that an option I think.