I am trying to play an audio file (MP3 in this case) with an HTML Audio tag on a Chrome browser running on Android. The same page used on a desktop Chrome works perfectly. The play action is triggered from a user click event (noticed other questions about this).
Here is the HTML for the audio player
<audio id="callAudio" controls></audio>
There is a button on the page (I'm using AngularJS)
<a class="button" ng-click="playerPlay()"><i class="icon ion-play"></i> Play</a>
The controller has
function getPlayer() {
return document.getElementById('callAudio');
}
$scope.playerPlay = function() {
getPlayer().play();
};
Looking at the Chrome develper tools, network tab I can see on the desktop client
with the details
On the other hand on the Android chrome I get
With the details
Why is the text red on the Android side, even though the status code is 200?
What is the partial content?
UPDATE
Another data point: I have a HTML5 Audio tag pointing to a random web MP3 file and it is playing just fine (on Chrome+Android). But when I point it to the same MP3 stored locally it won't play. I cross tested the same on Android on Win7 and it works fine there.
Related
I'm trying to add a next (or even previous) button to the notification Chrome will show on a Android (or even Apple) device when you are playing audio on a website (in the background). Clicking the button should fire a link or a JS function.
See below screenshot, I am using this code:
<audio controls autoplay onended="myFunction()">
<source src="<?php echo 'http://www.music.*****.com/music/' . $_GET['file']; ?>" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Screenshot from Android
If this is not possible, perhaps there is an easy way to make an app that can do this and fetch mp3's over http. I really just need a working solution, efficiency and looks are secondary as I am using this together with some friends only.
Thanks!
I have an AngularJS app that shows an embed Youtube video at the top of the page. The user can click buttons to change the video, which just updates the ng-src.
This works fine when viewed on a mobile website with a computer, or when viewed on my friends iPhone, but when I view the mobile site with my Android device it downloads the video file that is currently set to ng-src and just shows a blank box where the video should be. Any reason as to why this is happening?
Here is sample code.
HTML
<iframe
ng-src="{{trustSrc(YTSource)}}" controls>
</iframe>
Controller
$scope.YTSource = $scope.items[0].source;
$scope.changeSource = function(item) {
$scope.YTSource = item;
};
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
};
Trying to just use ng-src={{YTSource}} resulted in a trust error or something, hence why I have to use the $sce method.
So the user can click links to update the ng-src, which like I said is working fine on the computer view or on my friends iPhone, but with my Android device it fails to show any embed video (just a blank box), and it downloads the video file (with no prompts). Is there some weird glitch/bug that causes my Android device to do this, rather than show it an embed format?
What's the best way to detect if a browser supports autoplay of embedded media files?
Using the youtube javascript API, on iOS (and possibly Android) devices, if you call playVideo() prior to the user tapping on the video, the video is put in a bad state and is basically useless. You might do this when you want to autoplay the video after the page loads, or you might have your own play/pause button.
There are lots of discussions on how to get autoplay to work (see below), but another way to deal with this is to detect when it shouldn't be called. The obvious answer would be to detect a specific device or OS using the user agent string, but I'm wondering if there's a better way to do it.
Related posts:
YouTube iFrame API hangs in buffering state after the playVideo() command on iPad
Can you autoplay HTML5 videos on the iPad?
Autoplay an Audio File on Mobile Safari
How can I autoplay media in iOS >= 4.2.1 Mobile Safari?
I'm developing an app with html, css and javascript which i port trough Phonegap to play on an Android tablet. (android 2.3.1 Gingerbread)
Everything is working fine, except the Youtube embed.
If i place the iframe embed on my page there is no play-button above my youtubescreen, so the user does not know he has to press it. But if you press it, the movie loads into the external android video playing app.
But here's the second problem; when the movie ends, the external android player closes and returns to my app, but then my youtube video screen is black en has these ugly android videocontrols of the external player.
But i can't do anything with it... so the user can't press the movie to watch it again.
Does anybody know how to implement a youtube video correctly into an HTML based android application?
It's HTML, so webviews, videoview, intents and things won't work...
Things i tried:
iframe embed
object embed
html5 video embed
online embed on external page
but in every attempt, those ugly videocontrols keep popping up after the video ended.
I also tried another player, but with the same result... Anyone ideas? :-)
I'm making a webpage that needs to run completely offline on Android 4.1 tablet. I'm trying to embed video stored locally on SD card using HTML5 <video> tag. Source attribute is pointing to a subdirectory containing that video using relative path.
The problem is, that after hitting play button, video stays black and plays only sound. After enabling video fullscreen, it plays normally. Same behavior in both native browser and Chrome. When I set source to same video stored online, or enable web server on the tablet and load the video from localhost, everything works fine and embedded video plays well.
Is there any way to force local video to play in embedded mode on Android? Or is this behavior for some security reasons?