Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anything Slider – Playing video on hidden panel

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38153
    Pete_Smit
    Member

    Hi,

    I’ve implemented Anything Slider on a new website I have just launched (link below to the full test site)

    http://newbreedracing.businesscatalyst.com

    which incorporates three separate panels, each of which has an embedded vimeo video (positioned to the right), and image and a link tag (positioned to the left) wrapped in divs. I should also point out that I have set up the slider not to build any of the navigation or buttons and have autoplay turned on. This way the slider panels automatically fade through the three panels and only stop when the cursor hovers over a panel, or a video is being played. The slider is working fine except for one unusual issue.

    When the page first loads and the cover image and player controls for the first video appears if a user tries to click the play button two things happen 1. The play button’s normal hover functionality doesn’t work (it doesn’t turn red) and more importantly it results in the video in the third (and final) panel in the slider playing and not the video in the first panel. What the user expereinces however is the sound from the third video playing but no change to the first video (i.e the cover image continues to be displayed). The user only realises that the third video is in fact playing if they move there cursor away from the slider allowing the slider to display the other panels in succession and finally reaching the thrid panel.

    If however the user lets the slider complete one full turn all the videos play normally.

    I believe what is happening is that the the video in the last panel is being loaded first and the first video last. So when the user clicks on the first video’s play button it is not fully loaded (indicated by the fact that the play buttons hover styling in not functional) but the last video is and because all the video’s x and y co-ordinates are the same?? this results in the video that has been loaded in playing.

    To fix this I have looked into pre-loaders that will work with anything slider so I can try to load a temporary image of the first panel till all of the elements in the slider has fully loaded but without success.

    I then searched through the forums to see if there was a jquery/javascript solution to changing the loading order of elements, or only allowing interaction with the slider elements after all of them were loaded. I came across two possible solutions.

    1. Implementing the solution Mottie suggested in the discussion item below, although I’m not completely sure I have implemented it correctly, as I don’t claim to know much at all about jquery and javascript. But I have removed the final section in the anythingslider video,js file as required and added the second step in Mottie’s fix in the script in index page code (As below).

    https://css-tricks.com/forums/discussion/17501/anythingslider-with-embedded-videos-loading-twice/p1

    2. This didn’t have the desired effect but didn’t adversely affect the sliders functionality so I added the (window).load in the hope this would require all the elements to be loaded before the anything slider script would run. That doesn’t seem to be the case.

    Mottie, if you or anyone else can help me with a solution to this issue or even point me in the right direction to a solution I would be very grateful. My apologies also for the length of this post.

    Thanks in advance.

    Cheers

    Pete

    #103191
    Mottie
    Member

    It sounds like the clone of the last video (located left of the first panel) is automatically playing. Are the videos set to autoplay?

    Try switching the “infiniteSlides” option to “false” and see if the problem goes away.

    #103234
    Pete_Smit
    Member

    Hi Mottie,

    Thanks for responding to me. Just to answer your question, no the videos aren’t set up to autoplay and if the user lets the slider cycle through to even the second panel the slider functionality seems to be working fine (i.e the hover functionality on the video play button works normally (changes color) and more importantly the correct video plays when the play button is clicked. If the user lets the slider cycle through one full turn the video in the first panel also plays correctly. The issue only seems to present itself when the first panel has not had a chance to cycle through to the second panel.

    I also tried your suggestion of adding “infiniteSlides: false” to the slider options without any improvement. To make sure the other changes I had introduced (as mentioned in my first post) weren’t conflicting with infiniteSlides change I took them out in successive steps, also without any improvement.

    Can you think of anything else I could try?

    Thanks again for your help.

    Cheers

    Pete

    #103590
    Pete_Smit
    Member

    Hi Mottie,

    Anymore thoughts on this issue I’m having?? It would be great if you can take another look at this for me.

    Cheers

    Pete

    #103717
    Mottie
    Member

    Hi Pete_Smit!

    Sorry, I’ve been busy… try this code to see if it solves your issue.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.