I've implemented SoundManager 2 on my webpage which all works fantastically well in every browser I've thrown at it so far.
When I test on desktop, there is very little lag between clicking the div and hearing the sound played.
However, on Android there is always a lag of about a second the first time the sound is played. After that, there is hardly any lag at all.
Is it possible to reduce or remove the first time played lag on Android?
Here is the code I'm using
$(document).ready(function() {
soundManager.setup({
url: 'www.mysite.com/swf/',
preferFlash: false,
onready: function() {
soundManager.setup({
defaultOptions: {
autoLoad: true,
autoPlay: false
}
});
soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
}
});
$(document).on("click",".wrapper",function(e){
soundManager.play('mysound');
}
}
I've tried manually loading the sound like this
var preload = soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
preload.load();
But that made no difference!
Anybody had this working without a lag on Android?
I believe the problem is to do with android's policy of only allowing sound to play in response to a user input.
eg: Autoplay audio on mobile safari
This is a limitation in mobile browsers.
the reason you have lag is from the fact that the sound has to load the first time you click. Your preloading does not work, as it is not run in response to user input, and is therefore blocked.
A solution would be to implement a welcome screen that loads the sound upon hitting an 'enter' button, as the top comment of the above link describes.
If you only need this to work on one browser you can navigate to
chrome://flags/#disable-gesture-requirement-for-media-playback
on your android phone and click Enable
Related
I'm working on an app where one part of the process is shooting a video, then uploading it. I'm using react-native-video to display the preview after the user has finished recording, and react-native-camera for the capturing process. I also use react-navigation to move between screens.
Currently I can get to the preview screen and set the video component's source uri from Redux. However, there is no player to be seen. The uri is in format "file:///path/video.mp4", so apparently it should be in the app cache as intended.
First the user is presented with a camera, where s/he can capture the video.
const recordVideo = async () => {
if (camera) {
const data = await camera.current.recordAsync()
if (data) {
dispatch(saveVideo(data)) <-- CONTAINS THE URI
navigation.navigate(CONFIRM)
}
}
When stopRecording() is called, the promise obviously resolves and the video's URI will be dispatched to Redux. Afterwards we navigate to the "confirmation screen", where the user can preview the video and choose whether to shoot another or go with this one.
My problem is, I can't get that preview video to play at all. I think I've tried pretty much everything within my power by now and I'm getting really tired of something so seemingly simple being so overly difficult to do. I've gotten the video to play a few times for some odd reason, so it's not the player's fault. At best what I've achieved is show the preview once, but when you go back and shoot another, there's no video preview anymore. Also, the "confirm" screen loads photos normally (that were taken in the same manner: camera -> confirm), but when it's the video's turn, it just doesn't work. The video component's onError handler also gives me this: {"error": {"extra": -2147483648, "what": 1}} which seems like just gibberish.
PS. yes, I've read through every related post here without finding a proper solution.
Use Exoplayer
Instead of using the older Media Player on Android, try using the more modern Exoplayer. If you're on React Native 0.60+, you can specify this in your react-native.config.js by doing the following:
module.exports = {
dependencies: {
"react-native-video": {
platforms: {
android: {
sourceDir: "../node_modules/react-native-video/android-exoplayer"
}
}
}
}
};
I was experiencing the same issue and this solution worked for us. Note, we're only supporting Android 5+ so not sure if this will work with devices older than that.
https://github.com/react-native-video/react-native-video/issues/1747#issuecomment-572512595
I'm currently working on an Ionic/Angular app and I have problems with the video on android.
Everything works fine with ios and web browsers it's just Android.
I'll explain briefly how it is supposed to work. (The app is supposed to help with sports exercises)
I have a preview that can be clicked to show the video demo before doing the exercise. When you click on it plays the video, if you click again it pauses the video. Everything works fine for every platform.
Under the preview, you have a button that activates a function to start the video and reset it to 0
And the exercise start.
The function to start when clicking on the button :
onClickStartButton() {
this.isExerciseStarted = true;
this.exercise.sessionExerciseNumber = this._exerciseIndex;
this.overviewsService.setExercise(this.exercise);
if (this.video.nativeElement) {
(<HTMLVideoElement>this.video.nativeElement).pause();
(<HTMLVideoElement>this.video.nativeElement).currentTime = 0;
(<HTMLVideoElement>this.video.nativeElement).play();
this.isVideoPlaying = false;
}
}
I tried to set a timeout on the if statement to see if the pause() or play() started before the video was fully loaded (i stopped testing after a 3 second timeout) but it doesn't seem to come from there
Here is the HTML of the video being loaded
<video class="ion-no-margin" #video
*ngIf="exercise?.video" playsinline loop preload="metadata"
[ngClass]="{'preview-video': !isExerciseStarted}" tappable (click)="onTapToggleVideo()"
[poster]="exercise.thumbnail">
I have no idea WHY it does not work just for Android.
In my Android app, I have a webview where there is an embedded YouTube video inside the webview. My app has a native AdMob banner.
I'd like to hide the native admob banner from the app when user plays the video, so the banner does not show while the video is playing and then show the ads again when the video stops playing
The issue is that I do not know how to check if the video was started or stopped.
Any idea how this can be done? Thanks much.
One of the suggestions I think of is to set your AdView's visibility to GONE and also call mAdView.pause() the AdView while the video is playing. This should prevent any additional requests being made to AdMob. Once the video is done playing and you want to show your banner again - you should set the AdView's visibility to VISIBLE and call mAdView.resume()
The communication between webview and native are done through JavascriptInterface. YouTube has built it's API in a similar fashion. you can use the below code to achieve what you want.
To achieve the play/pause functionality via Youtube video you can use YouTube JavaScript Player API.
Example:
<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>
When the API is fully loaded, it looks for a global function called onYouTubeIframeAPIReady() which you should define.
Your code should look something like this
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}
Just make two buttons and call the needed method on click.
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
You can use JavascriptInterface to get the callback inside the native java/kotlin code from WebView.
More details info
Youtube javascript player API with example
JavaScript Interface with example
I am using jquery to show my videos along wither other contents and the admob. It should apply to your case too as you are using webview.
You need to detect the event - onPlayerStateChange. Check this question which shows the code and prerequisties:
Check if YouTube video is playing and run script
why don't you use default videoview to play youtube videos it'll make easier communication between admob bannner and played video apply same logic as mentioned by kasiopeous
In a Kendo UI Mobile ListView, a script to open an external link by native browser is called when a link is clicked.
The PhoneGap script is as follow:
On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');
The link can be opened on the corresponding native browser.
However, when the user switch back to the app from the native browser, some problems happen.
On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.
On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.
How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?
Thank you very much for your help.
Updated 1:
I changed the original tag to a tag, everythings work now. But I am still curious to see if it is certain kind of bugs for Kendo UI Mobile.
There is a serious problem with Kendo Mobile hanging the page completely, making the app totally unresponsive to touch/mouse. The offending CSS is in Loader.transition() which does this.container.css("pointer-events", "none") which is equivalent to:
document.body.style.pointerEvents = "none";
Ouch - that is ugly. Plus in _attachCapture there is offensive JavaScript for all mouse and touch events that does:
event.preventDefault();
Fatal if using an app with an embedded full page WebView/UIWebView (requiring app to be closed and restarted).
Hangs can happen if:
You have an exception in your code (even in unobvious places),
You mistype a transition (no exception, just hangs),
A user's browser doesn't fire the transitionEnd event properly for some reason (This was repeatable for one user's up-to-date Chrome browser.
There is a failure mode in the Interaction between page transitions and Loader (depending on timing, couldn't repeat),
Multiple other causes
Note that there is a comment in Kendo that says: "This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs.", so clearly Telerik know there is a problem.
You can use the following code during development to at least warn when Kendo Mobile has crapped itself:
var transitionTimer;
kendo.mobile.ui.Loader.prototype.wasTransition = kendo.mobile.ui.Loader.prototype.transition;
kendo.mobile.ui.Loader.prototype.transition = function() {
transitionTimer = setTimeout(function() {
alert('Kendo has hung the page');
}, 10000);
this.wasTransition.apply(this, arguments);
}
kendo.mobile.ui.Loader.prototype.wasTransitionDone = kendo.mobile.ui.Loader.prototype.transitionDone;
kendo.mobile.ui.Loader.prototype.transitionDone = function() {
clearTimeout(transitionTimer);
this.wasTransitionDone.apply(this, arguments);
}
I am developing an app using phonegap for android. It consists of around 25 images and similar number of mp3 files. Each mp3 file has duration not more than 10 seconds. The requirement of app is whenever a image is shown on screen its related mp3 file should be played. I am using jqtouch swipe action to move from one page to another. I am facing following problems both on emulator and real device(samsung galaxy 3)-
After 15-20 images sound stops playing both on emulator and galaxy 3. In logcat I got following error
ERROR/AudioFlinger(34): not enough memory for AudioTrack size=49216
I am using following code to play mp3 files
if(mp3file!=null){
mp3file.stop();
mp3file = null;
}
mp3file = new Media("/android_asset/www/name_of_file.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
I think error is due to audiomanager objects from phonegap api of each mp3 file remaining in memory.
I want to know how to destroy media object created in javascript. You can play, stop, pause. But is there any method in phonegap for android to destroy it so that it does not remain in memory after it has done playing.
Another problem that I am facing is related with left swipe action in jqtouch to view next image. If I am currently viewing image1 and if I try to view image2 by left swipe action, image2 is shown for short amount of time and after that image1 is shown for a moment and after that again image2 is shown. In short the transition from image1 to
image2 is not smooth and it has flickering effects. However if i go from image2 to image1 using right swipe transition is smooth.
Thanks
I got some help with another developer on this.The trick is to make a function declare mp3file outside the function then call stopRecord() on it.(even though you're not doing recording).I tested this with a simple button playing the sound over and over and it worked 75 times before I got tired of playing with it.
Let me know it works for you.
var mp3file;
function playAudio(){
if(mp3file!=null){
mp3file.stop();
mp3file.stopRecord();
mp3file=null;
}
mp3file = new Media("/android_asset/www/yourmp3.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
}