0
Yes it is possible. Currently I have no access to the source code. I will reply you 5 hours later with the solution.
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.
Yes it is possible. Currently I have no access to the source code. I will reply you 5 hours later with the solution.
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()
Thank you for the prompt and effective reply! It's exactly what I needed.
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/ .
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.
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.
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!
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
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);
}
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.
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;
If your question is related to the Ninja Slider, click:
Ask new question: Ninja SliderOtherwise navigate to one of the following forum categories, and post your question there.
##