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?
Related
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.
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 have a requirement to play YouTube video content from within an Android application on Google TV. Specifically, we'd like to play it from within a Webview inside a Google TV app. This works on Honeycomb devices (3.1), but does not work on GTV.
Here is the video we are testing with, and how we are linking it via a URL that is loaded into a Webview:
<iframe class="youtube-player" type="text/html" width="400" height="285" src="http://www.youtube.com/embed/u1zgFlCw8Aw" frameborder="0">
The page we are loading in the Webview also WORKS fine when using the regular Browser app (the video plays there, embedded via an iframe, just fine!).
Here are the Webview settings that we are using:
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setPluginState(PluginState.ON);
When loading the same URL that works in the Browser app from our own app, via a Webview, it fails. The screen shows the initial YouTube video in the box with the controls, but when play is pressed the box turns to plain black and no video plays. SOMETIMES audio plays, but never video.
Logcat shows:
E/libEGL(14956): call to OpenGL ES API with no current context (logged once per thread)
D/ShaderProgram(14956): couldn't load the vertex shader!
I did find an open bug report with another user having the same problem (http://code.google.com/p/android/issues/detail?id=22018) , but there is no follow up there, so I thought I would see if SO gets more attention. Does anyone have any more insight about this issue?
thanks
I've been working on a solution to the same problem. It is working on both tablets and Google TV (including the revue).
The major difference from your code is that I create the HTML code in the android app in code and pass this to webView.loadDataWithBaseURL
webView.loadDataWithBaseURL("http://www.youtube.com", html, "text/html", "utf-8", null);
For more details, please see the source I am working on:
http://code.google.com/p/android-reddittv/source/browse/trunk/RedditTV%20HD%20Android/src/com/elsewhat/reddittv/hd/YoutubePlayerActivty.java
I'm developing a web page intended for use on mobile devices, primarily Pandigital tablets running Android. On this page I have an html5 video element that plays upon page load, and when the video ends I need to have a Javascript function trigger and hide the video element. So far I have a basic multipage document set up with jQuery mobile just to test whether I can even get a trigger to work. The function I'm using is:
pageInit(function(){
$("#vid1").bind('ended', function(){
$.mobile.changePage($('#two'), 'fade');
});
});
The video (with a proper id="vid1") pops into fullscreen and plays perfectly. However, the page doesn't change when the video is finished playing. I am testing using Android 2.3.4.
I am trying to design a video website compatible with Android. A good example of what I'm trying to achieve is vimeo.com. They show a thumbnail of a video. When you tap it, the native Android player comes up in full screen:
Currently, I have an anchor to an FLV containing an h.264 encoded video:
click here to watch
When you tap the anchor on Android, it downloads the video rather than plays it. That's not what I want. How do I get it to play full screen in the native player like Vimeo? But unlike Vimeo, I would like the video to expand so that there's not so much black empty space around the actual video.
Ahh I see what you mean, clicking a Vimeo video opens the Android dialog of selecting which app should respond to that request (in my case just the browser (which downloads the file) or video player (which opens and plays it as you wanted)). This is normal Android behavior- if you have not defined which app should respond to a given request, it will ask you to select from among the supporting applications.
Have you even tried embedding a video in the way suggested through the link I gave you? You may find that it will have the exact effect the Vimeo video does. HTML5 <video> element on Android
EDIT: Actually I think your real problem is probably just that the file format you're using (.flv) is not among the core media formats supported by Android. http://developer.android.com/guide/appendix/media-formats.html
if you have the correct codec installed to play the video and doesn't work, check and make sure you have the correct mime types configured and that something in the registry or a file isn't overwriting.
use the old standard of defining mp4 and falling back to flash.
In mobile Safari and Android webkit there are javascript methods and events defined on the Video object that can help with this. There is another StackOverflow question dealing with this topic (for iPad, but I have used this on Android phones as well).
Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Mobile Safari documentation: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html