Play audio from beginning

Submitted by axym on Fri, 01/29/2016 - 21:10
Forums: 
Content creation

 How can I play audio(video) from beginning when I change slide.Thanks

falcon's picture

falcon

Mon, 02/01/2016 - 09:36

You mean via a setting, or as an end user? There are no settings for this, so you would have to code it. The end user may achieve it by dragging the seek bar.

axym

Tue, 02/02/2016 - 19:22

I use a similar code for the video. ( Flexslider + videojs).

How can I implement something similar in H5P?

Thanks.

 

Drupal.behaviors.my_custom2_flexslider_behaviour = {
        attach: function (context, settings) {  
          $('#slidem').bind('after', function(e, slider) {
              var currentVidID;
             currentVidID = $('#slidem .flex-active-slide video').attr('id');
             //alert(currentVidID);
             if (currentVidID ){
             myPlayer = videojs(currentVidID); // Setting to the currently viewed player. We might not be on the first video when this is called.
                     //var player = currentVidID;
                    //$f(player).addEvent('ready', ready);
                    if (myPlayer.duration() > 0){
                       $('#slidem').flexslider("pause");   
                   
                   
                    myPlayer.currentTime(0);
                   
                   
            myPlayer.play();
                        //myPlayer.addEvent('ended',  resumeslider()       );
                        myPlayer.on('ended',function(){           
                console.log('Video Complete');
                $('#slidem').flexslider("play");
                                myPlayer.stop();
            });
                    };       
                  
                }
       
            
              
          });
      }
  };

 

 

 

Thanks

falcon's picture

falcon

Tue, 02/02/2016 - 20:18

The suggestions below are not complete and have not been tested. They're just written to you as pointers on how you might try to achieve what you want.

For interactive video inside Flexslider you could try...

Inside the $('#slidem').bind('after', function(e, slider) { block you could try to add something like:

// If an H5P iframe exists we look there, if not it should be in our window
var instances = jQuery('.h5p-iframe').length > 0 ? jQuery('.h5p-iframe')[0].contentWindow.H5P.instances : H5P.instances;
         
// Find the instance and get the score from it if possible
for (var i = 0; i < instances.length; i++) {
  if (typeof instances[i].seek === 'function') {
    instances[i].seek(0);
    instances[i].play();
  }
}

For Audio inside CP it would be something like this:

H5P.externalDispatcher.on('xAPI', function(event) {
  if (event.getVerb() === 'progressed') {
    // Get the H5P content id for the question
    var contentId = event.getVerifiedStatementValue(['object', 'definition', 'extensions', 'http://h5p.org/x-api/h5p-local-content-id']);
          
    // If an H5P iframe exists we look there, if not it should be in our window
    var instances = $('.h5p-iframe').length > 0 ? $('.h5p-iframe')[0].contentWindow.H5P.instances : H5P.instances;
          
    // Find the instance and search for an Audio instance
    for (var i = 0; i < instances.length; i++) {
      if (instances[i].contentId === contentId) {
        var cp = instances[i];
        var slideInstances = cp.elementInstances[cp.currentSlideIndex];
        if (slideInstances !== undefined) {
        for (var i = 0; i < slideInstances.length; i++) {
          if (!cp.slides[cp.currentSlideIndex].elements[i].displayAsButton) {
            // Only play audio displayed as poster
            if (slideInstances[i].audio) {
              slideInstances[i].audio.currentTime = 0;
              slideInstances[i].audio.play();
            }
          }
        }
      }
    }
  }
}