Automatically start playing video

baltar's Avatar

baltar

25 May, 2014 06:42 PM

I have read many topics here, and your position about auto-play video is clear, and it's clear it's not supported in the plugin out of the box. Apart from that it would be great to heat you suggestions/opinion about my topic.
I'm trying to understand if it's possible to achieve this kind of scenario using RoyalSlider API. And how good it would be? Or should I look for some other slider-script in the first place?

The goal:

Automatically start playing video without ever showing a play/close button and stop when slide changes.
Probably thats what we need to do:
1. check if current slide is video
2. if so play it
3. when change slide - stop video(destroy player)

What I have now:

<div class="royalSlider">
<div class="slide-video">
<img class="rsImg" src="cover.jpg" data-rsVideo="video.mp4" />
<div class="rsABlock"><h1>Block content</h1></div>
</div>

<div class="slide-video">
<img class="rsImg" src="cover.jpg" data-rsVideo="video.mp4" />
<div class="rsABlock"><h1>Block content</h1></div>
</div>

<div class="slide-image">
<img class="rsImg" src="image.jpg"/>
<div class="rsABlock"><h1>Block content</h1></div>
</div>
</div>

Init slider:

$(document).ready(function(){

  var slider = $('.royalSlider').royalSlider({
    imageScaleMode: 'fill',
    controlNavigation: 'none',
    arrowsNav: true, 
    slidesSpacing: 0,
    transitionType:  'move',
    loop: true,
    controlsInside: true,
    video: {
      autoHideBlocks: false,
      autoHideArrows: false,
      autoHideControlNav: false
    }
  }).data('royalSlider');

// How could i target only specific slides with this?
  slider.ev.on('rsOnCreateVideoElement', function(e, url) {
    slider.videoObj = $('<video autoplay="autoplay" width="100%" height="100%" preload="preload" src="' + url + '"></video>');
  });

// Here is king of solution. But isn't it ugly? And there's a little delay before slider shows up.
        slider.ev.on('rsAfterContentSet', function(e, slideObject) {
          slider.playVideo(); 
        });
        slider.ev.on('rsAfterSlideChange', function(event) {
          slider.playVideo(); 
        });
        slider.ev.on('rsBeforeAnimStart', function(event) {
          slider.stopVideo(); 
        });

});

Would appreciate any advise. Thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 26 May, 2014 04:18 PM

    Dmitry Semenov's Avatar

    Hi,

    If you're going to use autoplay on videos, you shouldn't use default RoyalSlider data-rsVideo feature at all, as there is no point of it.

    • Put simple HTML5 video tag in each slide instead of .rsImg (without autoplay and autopreload).
    • Play/pause this video when slides change, here is simple example:
    var slider = $(".royalSlider").data('royalSlider'),
          prevSlideVideo,
          playSlideVideo = function() {
            if(prevSlideVideo) {
              prevSlideVideo.pause();
            }
            var video = slider.currSlide.content.find('video');
            if(video.length) {
              prevSlideVideo = video[0];
              prevSlideVideo.play();
            } else {
              prevSlideVideo = null;
            }
            
          };
      slider.ev.on('rsAfterSlideChange', playSlideVideo);
      playSlideVideo();
    
  2. 2 Posted by baltar on 27 May, 2014 11:01 PM

    baltar's Avatar

    Thanks for the answer Dmitry! It helped a lot.

  3. 3 Posted by Monika Petroczy on 08 Jun, 2014 10:29 PM

    Monika Petroczy's Avatar

    http://www.antioch.edu/global-elements/

    Hello, I think answer to our dilemma might be near this post:
    we want slide one to be a video, then the next 5 are stills. when the one min video plays, we need the slider to stop playing as the YouTube video plays. if visitors don't choose to watch it, the slider just plays like normal. if visitors click to watch the video, and they dont hover over it, it'll jump to the next slide as the video still plays for a min. we can't guarantee that visitors will hove over the video as it plays.
    the whole site is built on royal slider-thank you!

  4. Support Staff 4 Posted by Dmitry Semenov on 09 Jun, 2014 09:39 AM

    Dmitry Semenov's Avatar

    @Monika, consider using buil-in slider video feature http://dimsemenov.com/plugins/royal-slider/documentation/#video , and actions like autoplay will stop when user plays it.

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac