I have a weird issue playing videos embedded in video tags in my Phonegap 3.3 app on Samsung S4 + Android 4.4.2.
I have the following HTML code:
<video id='myvideo' autoplay=1 preload='auto'></video>
Videos are started via Javascript (with jQuery):
$('#myvideo').attr('src', 'http://...jpg');
$('#myvideo').attr('poster', 'http://...mp4');
$('#myvideo')[0].play();
Video does not start as expected.
The problem only turns out after upgrading from Android 4.2 to Android 4.4.2. The issue is not present on other smartphones running Android 4.4.2 (eg. Nexus 4, 5).
add this setting to your webview settings
webSettings.setMediaPlaybackRequiresUserGesture(false);
here is my js code to play video automatically and loop on it ( you can remove this part if you only want to play it once
// here is my code to find my video tag
var myVideo = document.getElementsByTagName('video')[0];
// if there is a video tag found ( this js is in a separate js files ) we play the video
if (typeof myVideo !== "undefined")
{
// setInterval allow me to monitor every 40 millisecond if the video is ending or not, if true we loop the video and play it again
setInterval(function() {
if ( myVideo.readyState != 0)
{
if (myVideo.paused) {
myVideo.currentTime = 0;
myVideo.play();
}
}
}, 40)
}
I think your .mp4 and .jpg are backwards.
Related
I've got a problem with some code in Ionic.
I am developing an app on Ios and Android that needs access to the video.
The video is private and specific that is why I need to store them in the assets folder.
Here is the problem, sometimes on Android, the video can not be loaded from this file and I have a GET error, it tries 30 times to get the video and then stop.
That means that whenever I play the video I get an Error saying: Uncaught promise the play() method was interrupted by a call to pause().
Here are the request from the app
Error message
Above are the request and the error code.
Here is my HTML5 code :
<ion-row class="ion-justify-content-center ion-align-items-center">
<video class="ion-no-margin" #video *ngIf="exercise?.video"
playsinline loop preload="auto" [ngClass]="{'preview-video': !isExerciseStarted}"
tappable (click)="onClickStartVideo()" [poster]="exercise.thumbnail">
<source [src]="exercise?.video" type='video/mp4'>
</video>
</ion-row>
And here is the TypeScript :
public onClickStartVideo() {
const video = (<HTMLVideoElement>this.video.nativeElement);
if (this.isVideoPlaying) {
video.currentTime = 0;
} else {
video.currentTime = 0;
video.play();
}
this.isVideoPlaying = true;
}
Thank you for your help.
I'm using the following html code. I'm able to get a video stream on my desktop, but I'm getting a grey play button in the android webView app. I'm serving this over a https connection.
Please guide me as Im new to both of these code snippets.
HTML
<div id="video-container">
<video id="camera-stream" width="500" autoplay></video>
</div>
Script.js
window.onload = function() {
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true },
function(localMediaStream) {
var vid = document.getElementById('camera-stream');
vid.srcObject = localMediaStream;
},
function(err) {
console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}
This screenshot is taken from my desktop chrome browser.
and this is taken from my phone webView.
I know this is an old thread but I recently run into the same issue and only after a lot of tries I finally found the solution.
If you see this play button all the permission should be set correctly.
It seems that the webview is waiting for an user interaction to start the stream but tapping on the icon does not starts the video (idk how the user should "approve" the streaming)
The solution is to change the setting of the webview in you webapp:
webView.settings.mediaPlaybackRequiresUserGesture = false;
In this way the stream starts correctly without any user interaction
i have tried running cordova media plugin in both kitkat and lollipop but it shows no response.
Not even the 3rd parameter for error's function is running.
I have also read almost every article or question about this problem and tried every way i could but nothing worked.
All i finally concluded was that this plugin is not fully supported in android versions above 4.1
I have tried:
<script>
document.body.onload="ready()";
function ready()
{
document.addEventListener("deviceready",function() {
var src;
// src's value
var med=new Media(src,
function() {
alert("success");
},
function(e)
{
alert("failed code: "+e);
});
med.play();
med.release();},false);
}
</script>
here is what i have tried replacing with //src's value
src = 'cdvfile://audio.mp3';
src = 'file:///android_asset/www/audio.mp3';
src = "cdvfile:///android_asset/www/audio.mp3";
src = "audio.mp3";
even after that stupid conclusion i wrote about up there, i still am doubtful that how it still runs on some devices with same os. So, any ideas of making audio files play in cordova app?
MORE INFO:
1>My project structure
appName
|___www
|___[+]css
|___[+]js
|___index.html
|___[+]img
|___audio.mp3
2>I am targeting 6.3.0 marshmallow 😋
Media definitely works for me on marshmallow - albeit I use wav files rather than mp3. I use
audioFail = loadAudio('sounds/no.wav'); where the file is stored in www/sounds
The media constructor is asynchronous but your code uses med immediately after issuing the call to the constructor - have you confirmed that med exists and is defined before you try to call med.play()?
I'm creating a smartphone app that is essentially a talking phrasebook, using App Framework 2 and Cordova 2.9, testing on a Samsung Galaxy S4. I found that after playing about 25 - 30 sound clips the sound stopped playing. I found the problem was that audio resources on Android are finite and not being released after issuing the media.play. I added a console log for each successful play and this showed successful execution even when it ran out of resources.
So, I added media.stop and media.release after the media.play (as discussed in several other questions on this forum and elsewhere) and found sound stopped working completely....sigh.
On a hunch, I added an alert statement between the media.play and media.stop and now sounds can be played as often as I want so long as I click OK when the alert displays. I also noticed the console log entries were no longer being made at all. So, it looks like the command after media.play is being executed immediately and not waiting for the sound to finish playing. Thus I issue media.play and before it can play the media.stop and media.release are executed and so I'm getting no sound. This seems to be confirmed as I noticed the alert was being displayed before the sound clip had finished playing and tapping OK terminated the sound playback, presumably because the media.stop and media.release were executed.
Am I misunderstanding how a synchronous call is supposed to work? Any suggestions to fix this much appreciated. Here's my js code:
<!-- Get the web root path -->
<script type="text/javascript">
function getWebRoot() {
"use strict" ;
var path = window.location.href ;
path = path.substring( 0, path.lastIndexOf( '/' ) ) ;
return path ;
}
</script>
<!-- /Get the web root path -->
<!-- Play sound using cordova -->
<script type="text/javascript">
function soundclip() {
var my_media = new Media(getWebRoot() + "/test.ogg", function() { console.log("my media found so stop and release after play"); });
my_media.play() ;
if (my_media) {
alert("my media found alert before stop and release") ;
my_media.stop();
my_media.release();
} ; // End If my_media
} ; // End soundclip
</script>
<!-- /Play sound using cordova -->
And here's the html
<input type="button" onClick="soundclip()" value=" Play Ay Caramba 1">
Thanks for any suggestions, this is driving me nuts !!
So, I'm maintaining the main page of an archive located here, where an audio element gets inserted with a randomly chosen RELATIVE link to an audio file. It plays the audio fine on desktop browsers, but it fails to play the audio on Android mobile browsers, like Dolphin Jetpack and Opera Mobile. Code that creates the audio element:
var d = document, $ = function(a){ return d.querySelector(a); }, o, a, b
audios = ["htmlfiles/Log4/Audio Files/1339041384627.png.audio02.ogg",
"htmlfiles/Log4/Audio Files/1339039129463.png.audio01.ogg",
"htmlfiles/Log5/Audio Files/s05_08.png.audio01.ogg",
"htmlfiles/Log6/Audio files/s06_19.png.audio01.ogg",
"htmlfiles/Log7P1/Audio Files/s07_01.png.audio01.ogg",
"htmlfiles/Log10/Audio files/1343286991927.png.audio01.ogg",
"htmlfiles/Log10/Audio files/1343293678793.gif.audio02.ogg",
"AudioFiles/1343888663849.png.audio02.ogg",
"AudioFiles/1345719774310.png.audio01.ogg",
"AudioFiles/1346311163394.png.audio02.ogg",
"AudioFiles/1346919244950.png.audio02.ogg",
"AudioFiles/1347509276756.png.audio01.ogg",
"AudioFiles/1347515470408.png.audio02.ogg",
"AudioFiles/1348079866537.png.audio01.ogg",
"AudioFiles/1349419913717.png.audio01.ogg",
"AudioFiles/1350030423418.png.audio01.ogg",
"AudioFiles/1350033736151.png.audio02.ogg",
"AudioFiles/1351231673165.png.audio01.ogg",
"AudioFiles/1343870457212.png.audio01.ogg"];
/*The code above is in the head tag, the one below is at the end of the body tag*/
window.opera && (o = $('div:not([id])')).parentNode.removeChild(o);
var audio = d.createElement("audio")/*, source = d.createElement("source")*/;
audio.autoplay = audio.controls = audio.loop = true;
// source.type = "audio/ogg";
audio.src =/* source.src =*/ audios[Math.floor(Math.random() * audios.length)];
// audio.appendChild(source);
audio.appendChild(d.createTextNode("Your browser does not support the audio element."));
$("div#container").insertBefore(audio, $("div#container > div:last-of-type").nextElementSibling);
I'd like to know what can cause such behaviour. I've tested both mobile browsers on w3schools' try-it page, and their audio worked fine there. I'm suspecting it could be something with the https protocol.
Edit: I've reported the bug for Opera through the report wizard, and for Mobotap via an email with a link to this question.
Just getting rid of this zombie. In the end, I think updating the browsers at a later point fixed it.