So i'm currently building an app using the multiplatform framework of nativescript. I've got the two plugins in question to work by themselves, but when both of them runs at the same time, and i wish to pause both tracks (video and audio with separate track files), only one of them stops, while the other continues. Why is that?
To start off, my nativescript audioplayer code is:
var videoViewModel = new Observable();
videoViewModel.audioPlayer = new TNSPlayer();
let audioParams = {
audioFile: selectedVideoEntity.audioPath_,
loop: true,
completeCallback: function(){},
errorCallback: function(error){console.log("failed with: ", error)}};
let audioPlayerCreatedCallback = () => {
videoViewModel.audioPlayer.getAudioTrackDuration().then((duration) => {
// iOS: duration is in seconds
// Android: duration is in milliseconds
console.log(`song duration:`, duration);
});
}
//todo: change to something more meaningfull (new RegExp('^' + "https\:\/\/|http\:\/\/", 'i')).test(selectedVideoEntity.audioPath)
if(selectedVideoEntity.audioPath.startsWith("http")){
console.log("getting from url");
videoViewModel.audioPlayer.playFromUrl(audioParams).then(audioPlayerCreatedCallback);
}
else{
videoViewModel.audioPlayer.playFromFile(audioParams).then(audioPlayerCreatedCallback);
}
When this is setup, I move on to making the videoplayer. This is implemented in xml.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:VideoPlayer="nativescript-videoplayer"
loaded="loaded" class="page" navigatingFrom="onNavigatingFrom" actionBarHidden="true">
<StackLayout id="layout">
<VideoPlayer:Video id="videoPlayer" controls="true" loop="false"
finished="{{ videoFinished }} "
src="{{ videoPlayerViewModel.videoPath }}" observeCurrentTime="true" muted="true" />
<VideoPlayer:Video id="rewardVideoPlayer" controls="true" loop="false"
finished="{{ rewardVideoFinished }} "/>
</StackLayout>
</Page>
And then I grab the object from the associated page file
let videoPlayer = page.getViewById("videoPlayer");
Expect the video to have it's source and all set at this point. Now is where the issues begin. The thing i want is to pause the video and the audio at the same time, so my approach is to pause the audio, whenever i call the cycleVideoPlayers pause function and afterwords, like this:
videoViewModel.audioPlayer.pause();
videoViewModel.videoPlayer.pause();
At this point only one of them stops (mostly the audio) and the video continues on. Any ideas why?
Links to the plugins: https://github.com/bradmartin/nativescript-audio https://github.com/bradmartin/nativescript-videoplayer
TO CLARIFY THE SITUATION
This only pauses one of the tracks and resumes the paused track, without having any effect
videoViewModel.audioPlayer.pause();
videoViewModel.videoPlayer.pause();
// Wait a few seconds
videoViewModel.audioPlayer.resume();
videoViewModel.videoPlayer.play();
This pauses the video and resumes flawlessly
videoViewModel.videoPlayer.pause();
// Wait a few seconds
videoViewModel.videoPlayer.play();
Same goes for audio
videoViewModel.audioPlayer.pause();
// Wait a few seconds
videoViewModel.audioPlayer.resume();
The explicit code that tries to pause and resume is given here. This code is in an exports.loaded function, in one of my nativescript page .js files.
cycleVideoPlayer.on(gestures.GestureTypes.swipe, function(eventdata) {
console.log("Swipe detected, with direction: " + eventdata.direction);
if (!paused) {
(function() {
vm.audioPlayer.pause();
vm.cycleVideoPlayerViewModel.pause(); //This doesnt work alongside audiopause.. why?
paused = true;
console.log("Paused");
});
} else {
(function() {
vm.audioPlayer.resume();
vm.cycleVideoPlayerViewModel.play();
paused = false;
console.log("Resumed");
});
}
});
If anybody have an idea or need clarification on the matter, please comment :)