HTML 5 Video Plugin

[hennysmafter]

Dear Malsup and other users,

First of all @malsup thank you very much for all the hours you have put into Cycle & Cycle2. I am really happy with the result.

Currently I try to make it work with HTML 5 video and started writing my own plugin for this. Below you can find the code: (I am trying this in an existing application therefore the classes and id's called lsss-video in the final plugin version this is going to be changed to work with all cycle-slideshows)

What is working:

First slide video autoplay, if video is finished it automatically goes to next slide. If that next slide is a video it autoplays that one. If you switch between slides then the previous video slide is paused and the new slide is played. Timeout is disabled on video slides so the entire video gets played

/*! html5video plugin for Cycle2;  version: 00000001 */
(function($) {
  $(document).ready(function() {
    // We add a class for targetting
    $('.lsss-video').parent().addClass('cycle-slide-html5video');

    // We assign a id to this class
    $('.cycle-slide-html5video').attr('id', 'lsss-video');

    // Autoplay the video in the first slide on page load and after each transition
    $( '.cycle-slideshow' ).on( 'cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
      // Before we give the command we need to check if the slide contains a video element
      if ($(currentSlideEl).is('#lsss-video')) {
        // Video element is present so we continue with playing the video
        $('video', currentSlideEl)[0].play();
        // Now we want to assign a class 'playing' to this video element only so we can play/pause it
        $('video', currentSlideEl)[0].addClass('playing');
        // We want to click on the slideshow to make it play/pause
        $(".cycle-slideshow").click(function() {
          console.log('clicked');
          // Now we check if the 'playing' class is present if it is we continue with play/pause
          if ($('video', currentSlideEl)[0].hasClass('playing')) {
            // Playing class is present so we continue with a click function
            console.log('The playing class is found!');
              // Now we pause the video and remove the `playing` class and add the `paused` class
              $('video', currentSlideEl)[0].pause();
              $('video', currentSlideEl)[0].removeClass('playing');
              $('video', currentSlideEl)[0].addClass('paused');
          // As the `playing` class was not present we continue to see if it was already `paused`
          } else if ($('video', currentSlideEl)[0].hasClass('paused')) {
            // Pause class is present so we continue with a click function
            console.log('The paused class is found!');
              // Now we play the video and remove the `paused` class and add the `playing` class
              $('video', currentSlideEl)[0].play();
              $('video', currentSlideEl)[0].removeClass('paused');
              $('video', currentSlideEl)[0].addClass('playing');
          }
        });
      }
    });

    // We pauze the previous video when the user advances to a new slide
    $( '.cycle-slideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      // Before we give the command we need to check if the slide contains a video element
      if ($(outgoingSlideEl).is('#lsss-video')) {
        // Video element is present so we continue with pauzing the video
        $('video', outgoingSlideEl)[0].pause();
        // We remove any left behind classes from the previous element
        $('video', outgoingSlideEl)[0].removeClass('paused');
        $('video', outgoingSlideEl)[0].removeClass('playing');
      }
    });

    // When the video is playing we don't want the timeout to interrupt it so on the video elements we override the timeout
    $('#lsss-video').attr('data-cycle-timeout', '0');

    // When the video is done playing we want it to automatically advance the slide to the next one
    $('video').on('ended',function(){
      //console.log('Video has ended!');
      $(this).closest('.cycle-slideshow').cycle('next'); // trigger next slide
    });

  });// Document Ready
})(jQuery);

What is not working: Play/Pauze video element when clicking on the .cycle-slideshow. This is partially working! What happens is that p/p works perfect the first time you see a slide but the 2nd time you see that slide it ain't working. The 3rd time it does. The 4th time it does not.

So on ODD it works and on EVEN it does not!

[hennysmafter]

Anyone???

[jacobsjensen]

Hmmm... could you possibly post your html markup? I've got a hunch that there is something mixed-up with you use of #lsss-video and .lsss-video... I need this functionality too, and have the time to dig a bit :-)

As I read your code you add #lsss-video to multiple elements (if you have more than one video element that is...) - It's not allowed to have multiple elements with the same ID...

[jacoblindgren]

Has anyone achieved playing HTML5 video in cycle2? I've found that the audio plays and not the video on most browsers.

[jhadley]

I got video to play by putting it in a div

<div><video width="700" height="550" controls><source src="../Assets/xxxxxx.mp4" type="video/mp4"></video></div>

But it doesn't pause when you advance beyond. Hennysmafter, I'm about to try your code, but if anybody has this working perfectly, I'd love to hear about it

Thanks! J

[jacoblindgren]

@jhadley Thanks for the reply. Could you try and repost the code? The link provided doesn't lead anywhere. I'm really interested to learn how to get HTML5 video working with cycle2.

[jhadley]

@hennysmafter I couldn't get your code to work as is... But then again I'm not a coder! If you have a version that works for any site, not just that existing application, I'd be really interested in seeing it

Thanks to you and to @malsup!