Anyone know for sure if playing local mp3 file using HTML5 is possible or not in Android?
Playing mp3 files from url's works fine, but not when embedded in the app. Been searching for definitive answer.
Thanks for any help
<html>
<head>
<title>Audio Player</title>
</head>
<body>
<br /> <br />
<audio id="player" autoplay loop controls="controls">
<source src="bassscales.mp3" />
</audio>
<br /> <br />
<div>
<button style="width:85;height:75" button onclick="document.getElementById('player').play()">Play</button>
<button style="width:85;height:75" button onclick="document.getElementById('player').pause()">Pause</button>
<button style="width:85;height:75" button onclick="document.getElementById('player').pause(); document.getElementById('player').currentTime = 0;">Stop</button>
</div>
</body>
</html>
I had the same problem with HTML5 and <video> tag, video playing fine if called programatically from file system, but when called from the tag, didn't work,
the way I solved it is having a javascript function in the HTML call the android system, in your case for playing an mp3
Android JavaScriptInterface tutorial
also check my question in the same subject
note that you need to place in the correct folder the mp3 [sorry don't remember in which folder, make a search and find it easy]
so first do a hello world javascript calling a log or basic function in android,
then make the javascript call the play function,
good luck
ps.
playing mp3 from assets folder example
and calling Android methods with javascript
jsInterface example
Does this look correct for the HTML file?
<body>
<video id="video" controls height="270" src="http://dl.dropbox.com/u/39276137/intro1girl.mp4" width="480">
</video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener('click',function(){
MyAndroid.video.play();
},false);
</script>
then don't know what to put in the JavaScriptInterface.java class...thanks for all the help :)
Related
Goodday,
I have a question in regards to a video resource I use on a website. I have made a fiddle for it here:
https://jsfiddle.net/cgzLkqqc/
html
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
Javascript
var showReelVid = document.getElementById("showReelVid");
showReelVid.play();
Now this works fine as intended on the web, but it does not seem to work on android phones without adding controls to the video tag. Does anyone have an idea what I am missing here cause I see it does work on other sites that use a fullscreen video without controls.
Cheers.
Only video elements with the muted attribute set to true are allowed to autoplay on Android and iOS devices.
The following example would autoplay:
<div id="video_container">
<video poster="" width="500" id="showReelVid" muted autoplay loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
https://jsfiddle.net/16j6851z/
If you require audio, have the video play on click (or with other user input) instead:
HTML
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4"> Your browser does not support HTML5 video :(.
</video>
</div>
JS
var showReelVid = document.getElementById("showReelVid");
showReelVid.onclick = function() {
showReelVid.play();
};
https://jsfiddle.net/p8cmv1vc/
need some help.
I'm building an app with HTML5 and using 'Intel XDK' to convert it to an .apk for android. The only issue I'm having is 'Looping' audio files.
I'm using a pretty simple code:
<audio id="myAudio" autoplay loop>
<source src="sounds/mysound.mp3" type="audio/mpeg"/>
<source src="sounds/mysound.ogg" type="audio/ogg"/>
</audio>
When I test the app the sound plays, but only once, no loop.
Thanks in advance!
You can achieve this in Java script in HTML by:
<script language="JavaScript" type="text/javascript">
var mp3snd = "songlocation.mp3";
var oggsnd = "home-sound.ogg";
document.write('<audio loop autoplay="autoplay">');
document.write('<source src="'+mp3snd+'" type="audio/mpeg">');
document.write('<source src="'+oggsnd+'" type="audio/ogg">');
document.write('<!--[if lt IE 9]>');
document.write('<bgsound src="'+mp3snd+'" loop="1">');
document.write('<![endif]-->');
document.write('</audio>');
//-->
</script>
It will achieve the same effect that you want (playing in background) while still being in HTML 5.
Installing this plugin might also help.
(Update for issue with XDK Android Sound Loop)
So I've made a compromise that works! Loops when app is running,but it won't run when the phone is locked.. Tested using Intel XDK Android build.
I created an internal IFRAME, that refreshes itself when the sound is over. Example below is a 1 minute sound:
On the page that audio is required:
<div id="audio_stream" style="position: absolute; margin-left: -1000px;">
<iframe src="iframes/audiotrack.html"></iframe>
</div>
This is the IFRAME code: (location: iframes/audiotrack.html)
<!--First, include refresh in meta-->
<meta http-equiv="refresh" content="60;url=audiotrack.html" />
<!--now enter audio that you wish to loop-->
<div id="audio_stream">
<audio controls autoplay="autoplay">
<source src="../sounds/FX/audiotrack.mp3" type="audio/mpeg"/>
</audio>
</div>
So it works, but not in the background. Anyone have any idea on how to keep this playing when the phone is locked?
i want to play mp3 file in background using jQuery in android phoneGap, i have included cordova-2.2.0.js with jquery-1.9.0.js file .. here is my html code. what i am doing wrong while i have given all permissions in Manifest File
here is my html page
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
</head>
<body>
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
<script src="cordova-2.2.0.js"></script>
<script src="jquery-1.9.0.js"></script>
<script>
$(document).ready(function(){
alert("hey");
var audio = new Audio();
audio.src = "audio.mp3";
audio.play();
});
</script>
</body>
</html>
try this link, use media instead of audio
var myaudio = new Media('/android_asset/www/audio/file.mp3');
for Your Error Attempt to call getDuration without valid media player
try this links
https://groups.google.com/forum/#!topic/phonegap/aa_2dHjy9C0
http://www.anddev.org/multimedia-problems-f28/mediaplayer-attempt-to-call-getduration-without-t51386.html
Android: attempt to call getduration without a valid mediaplayer
http://maffelu.net/phonegap-attempt-call-getduration-without-valid-mediaplayer/
i am saying to check this link bacause you have not posted the android code so try it.
Hope this will help.
I am loading html page in asset folder to android webview, the html pages has video. But video not playing, Here i share the code.
<!doctype html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" charset="utf-8" src="video.js"></script>
<script>
function en(){
video1.play();
}
</script>
</head>
<body>
<div id="t2" width ="1024" height="768" style="background- image:url(images/L6_P007.jpg); background-repeat:no-repeat;">
<video id="video1" width="1024" height="768" poster="images/L6_P007.jpg" controls autoplay onended="en();" >
<source src="videos/L6_P007.mp4" type="video/mp4">
<source src="videos/L6_P007.ogv" type="video/ogg">
<source src="videos/L6_P007.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is my java code
WebView webview = (WebView) findViewById(R.id.webView1);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient());
webview.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webview.loadUrl("file:///android_asset/videosamp/videosamp.html");
this issue is discussed many times on SO. check the answers to similar question here
get the VideoPlayer Plugin for android here.
The video player allows you to display videos from your PhoneGap application.
This command fires an Intent to have your devices video player show the video.
Adding the Plugin to your project
Using this plugin requires Android PhoneGap.
To install the plugin, move www/video to your project's www folder and include a reference to it in your html file after phonegap.js.
Create a directory within your project called "src/com/phonegap/plugins/video" and move VideoPlayer.java into it.
In your res/xml/plugins.xml file add the following line:
<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>
Using the plugin
The plugin creates the object window.plugins.videoPlayer. To use, call the play() method:
/**
* Display an intent to play the video.
*
* #param url The url to play
*/
play(url)
Sample use:
window.plugins.videoPlayer.play("http://path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:///path/to/my/video.mp4");
window.plugins.videoPlayer.play("file:///android_asset/www/path/to/my/video.mp4");
window.plugins.videoPlayer.play("https://www.youtube.com/watch?v=en_sVVjWFKk");
Note: When playing video from the assets folder, the video is first copied to internal storage with MODE_WORLD_READABLE.
I am working on a cross platform mobile application using phonegap (html,javascript) problem is selected item related image not display in iframe and this image display another page please see below code
<html>
<head>
<script>
function onchangeevent(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].value != "none"
)
{
frames['iframe2'].location.href = mySelect.options[PageIndex2].value;
}
}
}
</script>
</head>
<body>
<form name="form">
<p><select NAME="selectimage" SIZE="1" onChange="onchangeevent(this.form.selectimage)">
<option VALUE="none" SELECTED>Select a page and go</option>
<option VALUE="ic_launcher.png">one</option>
<option VALUE="icon.png">two</option>
</select> </p>
<p>
<iframe src="" name="iframe2" height="100%" width="100%">You need a Frames Capable browser to view this content.</iframe>
</p>
</form>
</body>
</html>
iframe tag not working android inbuild browser how can resolve the issue ? please tell any alternative tags supported all browsers.
Android browser supports iframe. I suspect it's one of the other attributes that may be causing an issue. I know scroll attribute can cause the iframe to not appear. Try a simpler version of the iframe with just the href and a width and height and see if it appears.
From the looks of it, the i-frame is working, it's most likely the select script, try using radio buttons see if that works.
For some reason several types of browsers are picky with the select form.