Vimeo has no video (just audio) after starting and then moving slides and coming back (iOS)

[porridj]

Hey up, I've come accross a bit of an obscure bug (or I'm maybe doing something wrong). If I need to give more info please just let me know.

I have a slider with 2 slides in, the first has a vimeo video embedded (which I am also using fitVid.js with) and when you click play, it is fine, when you click next slide it pauses fine, when you go back to the slide, the video has gone, but you can still click play which will give you the audio. Currently the only way I can get the video back is to refresh the page.

I have the slider built in drupal, using:
AnythingSlider v1.9.4 AnythingSlider Video Controller 1.5.1 beta for AnythingSlider v1.6+ AnythingSlider Slide FX 1.6 for AnythingSlider v1.7.11+

and using fitVid.js

Tested it on all devices and the only one it throws a problem with is iOS. I have tested it in Chrome and Safari and both give the same results.

Here is the code I am using to initialise the slider:

        jQuery('#slide_holder .slides').anythingSlider({
            resizeContents      : false,
            addWmodeToObject    : 'opaque',
            mode : 'f',
            theme : 'camcons',
            buildArrows : true,
            buildNavigation : true,
            buildStartStop : false,
            hashTags : false,
            infiniteSlides : true,
            autoPlay: true,
            autoplayLocked: true,
            autoPlayDelayed: true,
            delay: 7000,
            resumeDelay : 300,
            animationTime: 650,
            resumeOnVisible: false
            // expand: true
        })
        // Initialize video extension
        // see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
        .anythingSliderVideo({
            // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
            videoId : 'asvideo',
            // auto load YouTube api script
            youtubeAutoLoad : true,
            // see: https://developers.google.com/youtube/player_parameters#Parameters

            youtubeParams: {
                modestbranding : 1,
                iv_load_policy : 3,
                fs : 1
            }
        });

[Mottie]

Hi @porridj!

Is the video being added as an iframe? I don't use an iOS device regularly, and I have to borrow one, if it's available, to test anything. It wouldn't happen to be a flash issue would it?

The only things I can think of to recommend without having had a chance to test the problem would be:

• Use the Vimeo iframe to embed the video
• Set the infiniteSlides option to false... when true, it duplicates the first and last slide to make it appear to be infinite while scrolling. This can make the video appear to flash and/or look different during the animation. I would recommend not adding a video to either the first or last slide when setting the infiniteSlides option to true.

[porridj]

Hey @Mottie,

Thanks for the quick response :)

I am using the iframe, and like I say, it loads and plays fine to start with, and if you don't change slides it doesn't break at all and will play all the way through. If you have it in 2nd or 3rd slider, you can do the same as long as you dont click play then change slides, once you do that you can't get video.

I have tried setting infiniteSlides to false as recommended (I even had my fingers crossed when I cleared my cache). And it doesn't appear to have effected anything. I am currently using fade instead of slide so have even tried commenting it out completely.

The reason we started using vimeo, was because youtube had a similar issue on iOS, but this was that if it wasn't visible when the page first loaded, it wouldn't let you load it and would just give audio with black screen, i.e. on a slider, in a modal etc. I don't think it's the same issue but thought I'd offer that nugget of info if it's useful at all...

Cheers

[porridj]

I meant ot post my code in there too...here it is:

<li class="row-5818 video-slide">  
    <img src="/sites/default/files/styles/slider/public/images/sliders/digital-services-homeban.jpg?itok=D6bWn_2u" />
    <div class="video_holder">
        <iframe width="550px" height="309px" src="//player.vimeo.com/video/50635983?width=550px&amp;height=309px&amp;color=00adef&amp;portrait=0&amp;title=0&amp;byline=0&amp;autoplay=0&amp;loop=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
    </div>    
</li>

[Mottie]

Are you using the latest version of AnythingSlider and the video extension?

[porridj]

As far as I know I am. AnythingSlider v1.9.4 AnythingSlider Video Controller 1.5.1 beta for AnythingSlider v1.6+

I will try and set up a JS fiddle as soon as I can