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.
Related
Impossible to autoplay youtube videos in an Android webview by using youtube iframe API. Does someone knows if that is possible?
As already mentioned in Mobile Considerations, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments due to the restrictions wherein HTML5 <video> element only allows playback to take place if it's initiated by a user interaction.
You may, however, try the given suggestions in the following SO posts and might work for you:
Youtube Api android autostart
You can use loadVideo() method which loads and plays the specified video. And, there is also the cueVideo() method, which adds the video to the playlist, but does not automatically start playing the video.
Android webview html5 video autoplay not working on android 4.0.3
You can usually work around it by triggering the play() on another event (eg the onloaded event).
Hope that helps!
i am making a phonegap app which shows videos via an html5 video player. The video play fast and fine on ios, but it takes time to start playing on android. it loads some part of the video or maybe the whle video and then plays it. i have given the preload="none" attribute. how do i make the video play instantly?
Android will not preload the video on mobile web implementations. Also, even after the video has been preloaded (the first few bytes), the decoding takes some time on weak devices.
For this reason, your best bet IMHO would be:
Enable the autoplay without user gesture on the web view that contains your phonegap app
WebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
Then:
In JS, mute and hide the video, and star to play it
When the user performs the action that triggers the play, set the video's location to 0, reveal and umute it:
document.getElementById('myVideo').currentTime = 0;
document.getElementById('myVideo').muted = false;
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?
I have an Ebook web app with a jquery carousel plugin (Royalslider) that preloads HTML component files(image, HTML, CSS), using AJAX, in the succeeding page containers when the user swipes to the next page. This Ebook web app is loaded in a native app webview, both iOS and Android. In some of the pages, I place video triggers to play a video overlay (YouTube, MOVIDEO). I'm testing this in mobile devices (iPhone and Android phones)
The pre loading of the HTML components work perfectly fine until I play the embedded video in the page container. For example, I play an embedded video in page 2, the mobile video player loads, plays and I close the video. However, when I swipe to the succeeding pages, the preloading of the HTML components doesn't occur so I end up with empty pages in the page containers of the carousel. This issue occurs only in the webview of the native app. I tried it on an external mobile browser and it doesn't happen.
Is there a mime-type or data-type that I need to set again after loading the video? Why won't the AJAX fetch of HTML contents work after playing the video? Is this an "origin" issue after loading the videos?
I'm not familiar with the Android and iOS webviews. I'm putting this e-book web app as a 3rd party solution provider.
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? :-)