I am converting some HTML5 to work with Android. Android does not support the element, so the play method does not function.
I am using PhoneGap's media element, and that does play audio. What I want, is a way to find the first source of the audio tag, and then use that with media play, but this does not seem to work.
function playSound(whatToPlay) {
// removed since <audio does not work
// var snd = document.getElementById(whatToPlay);
// snd.play();
toPlaySrc = $("#"+whatToPlay+":first-child").eq(0).attr("src");
// next I will have to deal with /android_asset and my current partial path
myMedia = new Media("/android_asset/"+toPlaySrc, onSuccess,onError);
if (myMedia)
myMedia.play();
}
playSound("clockticking");
this is my audio element.
<audio id="clockticking" preload="auto" autobuffer onEnded="instructionFinsihed()">
<source src="../sound/tictoc.mp3" type="audio/mp3" />
<source src="../sound/tictoc.ogg" type="audio/ogg" />
</audio>
I have many existing audio elements, so a general solution would really be important, I can not, for instance just ad id tags to all the mp3 elements and solve it.
Okay, I'm working on some monkey patch code for the Android WebView, you can see the progress over on my corinthian github project. In the meantime what you'd want to do is setup a on deviceready listener:
document.addEventListener("deviceready", monkeypunch, true);
create an array to hold the media objects:
mediaObjs = [];
and in the monkeypunch method you would do:
function monkeypunch() {
var audioclips = document.getElementsByTagName("audio");
for (var i=0; i < audioclips.length; i++) {
// Create new Media object.
var audioSrc = audioclips[i].firstElementChild.src;
if (audioSrc.indexOf("file:///android_asset") == 0) {
audioSrc = audioSrc.substring(7);
}
mediaObjs[audioSrc] = new Media(audioSrc);
// Create the HTML
var newAudio = document.createElement('div');
var newImg = document.createElement('img');
newImg.setAttribute('src', 'images/play.png');
newAudio.appendChild(newImg);
// Set the onclick listener
newAudio.addEventListener("click", function() {
// figure out what image is displayed
if (newImg.src.indexOf("images/play.png", newImg.src.length - "images/play.png".length) !== -1) {
newImg.src = "images/pause.png";
mediaObjs[audioSrc].play();
} else {
newImg.src = "images/play.png";
mediaObjs[audioSrc].pause();
}
});
// replace the audio tag with out div
audioclips[i].parentNode.replaceChild(newAudio, audioclips[i]);
}
}
You can grab the play/pause images from my github project. I'm planning on adding more functionality when I have some more time.
Related
I have a HTML5 video element which is showing mp4 video in LoadingController(Ionic framework). My problem is that video is not immediately loaded after loader is shown, I can see the default thumbnail/poster of html5 video element for 0.2s and just after this is video shown. The problem occurs just on Android device, iOS devices are playing video instantly.
Loader initialization code:
var preloaderOptions: object ={
spinner: 'hide',
duration: 2500,
message: `
<div class="custom-spinner-container">
<div class="custom-spinner-box">
<video id="videoPlayer" autoplay muted loop playsinline webkit-playsinline preload="metadata">
<source src="./assets/videos/loader.mp4" type="video/mp4" />
</video>
<p>`+loaderMessages[Math.floor(Math.random()*loaderMessages.length)]+`</p>
</div>
</div>`,
cssClass: 'custom-loading'
};
this.preloaderController.create({...preloaderOptions}).then((preloader) => {
this.preloader = preloader;
preloader.present().then(el => {
let video = this.preloader.getElementsByTagName('video')[0];
video.autoplay= true;
video.playsInline = true;
video.muted = true;
video.loop = true;
video.preload="metadata";
video.webkitPlaysInline = true;
video.play();
});
});
I also tried to place poster image into video markup and typescript, but not helped to get rid of default thumbnail. Preload="auto" wasn't working too.
Thanks for help.
Ok, so I fixed it by adding white poster jpg picture, but the key is to show video just before calling play() method.
this.preloaderController.create({...preloaderOptions}).then((preloader) => {
this.preloader = preloader;
let video = this.preloader.getElementsByTagName('video')[0];
video.style.display = "none";
preloader.present().then(el => {
video.autoplay= true;
video.playsInline = true;
video.muted = true;
video.loop = true;
video.preload="auto";
video.poster = "./assets/images/loader_poster.jpg";
video.style.display = "inline-block";
video.webkitPlaysInline = true;
video.play();
});
});
I am using jquery to load YouTube Video through iframe to reduce the initial page load time. Using this approach – only the video thumbnail is loaded along with the page and the actual player loads when the user hits the play button. But AutoPlay is not working on Android and Iphones though it is perfectly working on desktops using windows. When I googled this problem, it turns out "Chrome and Safari browsers on iPhone and Android only allow playback of HTML5 video when initiated by a user interaction. They block embedded media from automatic playback to prevent unsolicited downloads over cellular networks." I want to autoplay the video. Please help.
Here is my jquery
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = YouTubeThumb(v[n].dataset.id);
div.onclick = YouTubeIframe;
v[n].appendChild(div);
}
});
function YouTubeThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/mqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function YouTubeIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
and the HTML
<div class="youtube-player" data-id="YouTube_Video_ID"></div>
try this example:-
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
i was made a simple video playback for android application with adobe flash using action script 3, where a flvplayback access playlist from xml file "xmlVideoPlayer.xml", and i put in folder "media/PustakaXML/xmlVideoPlayer.xml" where parent folder same with myfile.fla (project file).
can somebody help me, how to ; if i put myxml file on SDCARD on android mobile. so if i publish it, to APK, and instal on android mobile, the aplication can access myxml file on SDCARD.
below the script on my adobe flash actionscript code.
import fl.video.*;
import flash.events.Event;
import flash.net.*;
// Set Variables
var flvControl:FLVPlayback = display;
var flvIndex:Number = 0;
var loopAtEnd:Boolean = true;
// Load XML file...
var xmlList:XML;
var xmlPath:String = "media/PustakaXML/xmlVideoPlayer.xml";
//HELP HERE if file put in SDCARD
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest(xmlPath));
// Receive the XML and load the first video
function xmlLoadedHandler(event:Event):void
{
// Save XML
xmlList = new XML(xmlLoader.data);
// Set video (Start)
flvControl.source = xmlList.video[0];
}
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedHandler);
// 3. Handle video completion (load next video)
function completeHandler(event:fl.video.VideoEvent):void
{
// Get next item in list
flvIndex++;
// Validate index
if( flvIndex == xmlList.video.length() ){
if( loopAtEnd ){
flvIndex = 0;
}
else{
return;
}}
// Load next video
flvControl.source = xmlList.video[flvIndex];
}
flvControl.addEventListener(fl.video.VideoEvent.COMPLETE, completeHandler);
i am sorry my English no good enough...
I have a very specific problem with jPlayer. I need to run it in Android/iPhone, which is no problem thanks to "jPlayer Android Fix" on the documentation. However, I also need it to stream a ShoutCast .MP3 file, not a ShoutCast stream. All the documentation I read points to a generic URL/IP/Port, but not a file.
I have got it all working with a static MP3 using the following code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var id = "#jquery_jplayer_1";
var bubble = {
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
};
var options = {
swfPath: "/jplayer2-4-0",
supplied: "mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
};
var myAndroidFix = new jPlayerAndroidFix(id, bubble, options);
$('#setMedia-Bubble').click(function() {
myAndroidFix.setMedia(bubble);
$('.jp-title ul li').text('Bubble');
});
$('#setMedia-Bubble-play').click(function() {
myAndroidFix.setMedia(bubble).play();
$('.jp-title ul li').text('Bubble');
});
$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});
//]]>
</script>
... but the moment I change
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
to
mp3:"http://live.station.ca:8000/stream.mp3"
... I get nothing. I've even tried
mp3:"http://live.station.ca:8000/stream.mp3;stream/1"
Can anybody help? Thanks in advance!
I made a html page ,and put an audio tag in it then I try to use my android browser to play some music .
But it doesn't work. Here is my code:
<audio id='simple-audio-player' src="http://m.html5/baidu.mp3" controls="controls" preload="metadata"></audio>
window.onload = function () {
var au = document.getElementById("simple-audio-player");
au.load();
if(au.networkState != au.NETWORK_NO_SOURCE){
alert('au.networkState != au.NETWORK_NO_SOURCE');
try{
au.play();
}catch(err){
alert(err);
}
}else{
alert('au.networkState == au.NETWORK_NO_SOURCE');
}
};
I think it would be something wrong with my IIS config ,but I not sure.
You can't play audio from the window load event, it has to happen in response to a user interaction.
Like this...
window.addEventListener('ontouchstart', onStart);
function onStart()
{
var audio = new Audio(); // --or-- document.getElementById('id-of-audio-tag');
audio.src = "test.mp3";
audio.play();
}