Maybe not the best title, however the effect that I am having trouble creating is:

  • slideshow of a number of videos
  • each video plays entirely
  • after the final video plays, the first starts playing again

The problem that I have is that videos are rotating after the transition delay regardless if the video is finished. If I set the transition delay to 0, the videos do not rotate.

Has this been accomplished before?

Comments

redndahead’s picture

You should turn on pause on click. This will keep it from rotating when someone clicks the video. As far as starting the slideshow after the video is over you would have to create custom functionality in whatever player you are using. There is no way for views slideshow to know that the video is finished.

waverate’s picture

Thanks for the quick reply.

If we add a duration field to each node, can that be used to rotate the video on different durations?

redndahead’s picture

You would have to use the timeoutFn advanced function and then pull that value from your view. You can set it to display: none and then use jQuery to get that value. You can see the code that is used here http://jquery.malsup.com/cycle/timeout.html

drclaw’s picture

I wanted similar functionality so I attempted a patch that integrates a dynamic timeout into views slideshow cycle. You can find it here: http://drupal.org/node/1541254#comment-5898154

therealwebguy’s picture

Issue summary: View changes

This is a bit of an old topic, but I wanted to share an approach I recently implemented. The use case was there would be slides that would contain HTML5 video and slides that would just contain images. The scenario was:

  1. If a video is present, start the video automatically and wait until the video is done playing before continuing on to the next slide
  2. If a video is NOT present, use the timeout value set in the view to hold the slide for the default (defined) duration.

With this criteria, a few things needed to be considered in order to write the javascript required to make this work.

  1. Videos can not loop, so be sure your video field included in your slideshow is not set to loop
  2. Videos should not autostart, javascript should handle this for you. The reason is the latency experienced in the transition period between slides. Let javascript start the playing of the video once the transition is complete.
  3. The slideshow should start out as paused. Javascript will handle firing the action: nextslide for you depending on whether a video is or is not present on the given slide.
  4. With your view slideshow configured, you can now implement the following javascript:

    (function($) {
      Drupal.behaviors.viewsSlideshowHTML5Video = {
        attach: function (context, settings) {
          // Get the first object in the viewsSlideshowCycle object, since we don't know
          // the name of it but need to get properties from it.
          for (var key in settings.viewsSlideshowCycle) break;
          // Capture the transition speed set for this slideshow
          var speed = parseInt(settings.viewsSlideshowCycle[key].speed);
          // Capture the slide timeout set for this slideshow
          var timeout = parseInt(settings.viewsSlideshowCycle[key].timeout);
          // We can't the next slide DOM info until views_slideshow finishes the
          // transition, so we hold for the transition time before doing our work.
          setTimeout(function() {
            // Capture the slideshowID needed for triggering actions on the slideshow.
            var slideshowID = settings.viewsSlideshowCycle[key].slideshowId;
            // Attempt to target a visible video element in the slideshow. We'll check in
            // a second if we have a video or not and determine how to proceed.
            var vid = $(".views_slideshow_slide:visible video", context);
            // If this is a video, start the video and hangout until the video complete.
            if (vid.length > 0) {
              vid[0].play();
              vid[0].onended = function () {
                Drupal.viewsSlideshow.action({ "action": "nextSlide", "slideshowID": slideshowID });
                Drupal.attachBehaviors();
              }
            }
            // If this is not a video, set the slide duration.
            else {
              setTimeout(function() {
                Drupal.viewsSlideshow.action({ "action": "nextSlide", "slideshowID": slideshowID });
                Drupal.attachBehaviors();
              }, timeout);
            }
          }, speed + 100);
        }
      }
    })(jQuery);
    

    I chose to implement this code via a module with a scripts[] include in the .info. Feel free to include this in a fashion that works best for you.

    Very open to feedback on this approach.

bloomt’s picture

The code above almost works for me, it plays half of my videos. Every other slide shows black.

For example even slides play correctly for the correct duration, odd slides do not play at all and show only a black screen or a non moving still from the video.

nickdickinsonwilde’s picture

Status: Active » Closed (outdated)

re-open if still any issue for anyone.

phildu’s picture

hello

in first , i'm not really a dev, i understand a part of the code
i try to use this hack but ...

the video is not detect

i try to debug but...

i insert alert(vid.lengtht) to check the var but the result is 0
i 'm sure i have insert a youtube video in a video field in my node

so can you help me please

ledjerdemain’s picture

#5 code is ace! I could not get it to work 100% because I have zero knowledge of code. I copied this code and pasted it into a javascript file which I named startvideo.js thant I added a scripts[] line in the views slideshow jquery cycle info file and... though the videos DO start automatically, it sort of messes up everything else that uses javascript (that's kinda of a deal breaker).

Am I doing something wrong? or is this issue related to the jquery version I'm using?

By the way I was too ignorant for any of these links
https://www.drupal.org/docs/7/api/javascript-api/adding-javascript-to-your-theme-or-module
https://www.drupal.org/docs/7/theming/working-with-javascript-and-jquery
https://www.drupal.org/docs/7/api/javascript-api/managing-javascript-in-drupal-7

So I guess I really need a working example on how to turn this code into a module.

Thanks!