Ninja Slider / Posts /

How to reset slide audio currentTime

-1

First of all, great work! I really want to learn how to use ns to replace my many flash based projects. I am redeveloping a lecture composed of slides that each contain a unique image and audio file. Sometimes users want to pass over the complete audio and move to the next slide. Everything works fine, except that when leaving a slide I want its audio reset to currentTime=0 instead of resuming from the point at which it was left. I have posted a short sample here.

To observe the issue, click the next arrow before the audio has finished, and then click the back arrow of the next slide to return to the first. Any help would be greatly appreciated.

Dale Hawkinson  3 years ago   viewed: 1849    

10 Answers

0

Yes it is possible. Currently I have no access to the source code. I will reply you 5 hours later with the solution.

Milo   3 years ago
0

As you are using the HTML5 video/audio, you can fix it by modifying the ninjaVideoPlugin.js as follows:

Search for:

a.pause&&a.pause()

And replace it with:

a.currentTime=0;a.pause&&a.pause()
Milo   3 years ago
0

Thank you for the prompt and effective reply! It's exactly what I needed.

Dale Hawkinson   3 years ago
0

While testing the edited plugin, the change did accomplish what was intended. However, I discovered two new issues. These are present in the original plugin as well as the edited plugin.

First, in IE11 the audio repeats in a loop; all other browsers play it only once, as it should. Second, clicking anywhere on the slide causes the audio to play again. My test page is  https://www.math.ksu.edu/~dph/ninja-slider1/  .

Dale Hawkinson   3 years ago
0

Another issue surfaced... in advancing to the third slide on the test page, the first audio file and the assigned audio file played simultaneously. After both files finished playing, clicking anywhere on the page played only the assigned audio file.

Dale Hawkinson   3 years ago
0

Please navigate forward and backward on the test page, as it may be of help in troubleshooting the problem. I apologize for not correctly using the forum posting procedures.

Dale Hawkinson   3 years ago
0

Hi Dale,

Please open the ninjaVideoPlugin.js, and search for:

ended:function(){set_ZIndex(a,0);c.next();a.currentTime=0}

Then remove the a.currentTime=0

If you still have issues after the modification, remove the set_ZIndex(a,0); either.

Another property you can tweak is the navigateByTap option in ninja-slider.js. You can change it to false to avoid issues that happen between slide changes.

Let me know your testing results. Thanks!

Milo   3 years ago
0

Hello, Milo.

I do sincerely appreciate your prompt replies, and effort to find a solution for me. I made each edit to ninjaVideoPlugin.js and tested separately. I could not detect any difference. I then made the edit to ninja-slider.js and still had issues. The test file  https://www.math.ksu.edu/~dph/ninja-slider1/  has three slides. Here are my results so far.

On all slides, clicking anywhere on the slide (except for the nav arrows) after all audio completes results in replaying the correct audio file for that slide. (Note: I could adapt my pages for this problem by placing a small note at the bottom of the slide - "Click anywhere to repeat audio." I would prefer not to do this, though.)

Slide 1 - audio1 plays correctly on page load, on prev nav from slide 2, and on next nav from slide 3. This is true both before or after the originator's audio completes.

Slide 2 - audio plays correctly on next nav from slide 1; on nav prev from slide 3, both audio 1 and 2 play.

Slide 3 - on next nav from slide 2, both audio1 and audio2 play; on prev nav from slide 1, only the correct audio3 plays.

Please let me know if you have any more insights.

Best regards,

Dale

Dale Hawkinson   3 years ago
0

When the audio is completed, click the video will restart the audio. This is the default behaviour of the HTML audio and we can hardly disable it.

As for the previous audio keeps playing issue when we nav away to the next or the previous audio, I tested with the demo 9 with the following settings, and I didn't find that issue. Only the current audio is playing as expected. I tested it in the localhost server environment. Would you make the similar changes and test it out again? Thanks!

HTML:

<li> <a class="ns-img" href="img/9/7.gif"></a> <div class="video" style="background-color:transparent;height:auto;top:auto;bottom:30px;"> <audio id="sound" data-autoplay="true" controls> <source src="img/mcaudio2.mp3" type="audio/mpeg"> </audio> </div> </li> <li> <a class="ns-img" href="img/9/8.gif"></a> <div class="video" style="background-color:transparent;height:auto;top:auto;bottom:30px;"> <audio id="sound" data-autoplay="true" controls> <source src="img/mcaudio2.mp3" type="audio/mpeg"> </audio> </div> </li>

ninjaVideoPlugin.js (note: your minified code may have changed the variable names):

/*--------------html5 vidio or audio------------------*/ //www.w3schools.com/tags/ref_av_dom.asp function extendSliderFunForhtml5VA() { //This func is called by li.onclick this.playVideo_VA = function (v) { if(v.play) v.play(); }; //This func is called by clicking slider's nav button this.unloadPlayer_VA = function (v) { v.currentTime = 0; if (v.pause) v.pause(); }; } function addVAEventHandlers(slider, html5VA) { if (!slider.playVideo_VA) { extendSliderFunForhtml5VA.call(slider); } var eventsObj = { handleEvent: function (event) { if (event.preventManipulation) event.preventManipulation(); switch (event.type) { case 'click': event.stopPropagation(); break; case 'play': this.play(); break; case 'ended': this.ended(); break; case 'loadedmetadata': this.loaded(); break; } }, play: function () { setSliderWhenOnPlay(slider); }, ended: function () { set_ZIndex(html5VA, 0); slider.next(); //html5VA.currentTime = 0; }, loaded: function () {} }; addEvent(html5VA, "click", eventsObj); addEvent(html5VA, "play", eventsObj); addEvent(html5VA, "ended", eventsObj); addEvent(html5VA, "loadedmetadata", eventsObj); }


Milo   3 years ago
0

I made the changes to the html - primarily <a></a> instead of <img> and <map>. I changed the css to allow keyboard navigation for testing purposes. Your solution works. (No surprise!) I have devised an alternative navigation scheme, so all is well. I'll be purchasing a license next week. Many thanks for your interest and persistence.

Dale Hawkinson   3 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: