Android HTML5 Video in Fullscreen Mode - android

I'm trying to get my video stream to work on android in fullscreen mode. For iOS I use a native <video> tag, which works perfectly.
I can play the video on my android, but I don't have a fullscreen button. I also tried to create a own template for the android devices and simply set the width and height of the player to the window size (Fake Fullscreen). The problem I have here is, that when I rotate the device, the resize doesn't work correctly, so that i can scroll over the video.
Heres what I tried:
$(document).ready(function() {
$(window).on('resize orientationchange', function() {
$('#myPlayer').width( $(window).width() ).height( $(window).height() );
});
}
Can anyone help me to get this to work on Android?
I hope you can understand my question, my english isn't that good ...

HTML5 video full screen on mobile browsers (android)
seems the same question.
The events you need are: webkitbeginfullscreen (enter fullscreen) and webkitendfullscreen (exit fullscreen)
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

Related

<HTMLVideoElement> does not play everytime on android

I'm currently working on an Ionic/Angular app and I have problems with the video on android.
Everything works fine with ios and web browsers it's just Android.
I'll explain briefly how it is supposed to work. (The app is supposed to help with sports exercises)
I have a preview that can be clicked to show the video demo before doing the exercise. When you click on it plays the video, if you click again it pauses the video. Everything works fine for every platform.
Under the preview, you have a button that activates a function to start the video and reset it to 0
And the exercise start.
The function to start when clicking on the button :
onClickStartButton() {
this.isExerciseStarted = true;
this.exercise.sessionExerciseNumber = this._exerciseIndex;
this.overviewsService.setExercise(this.exercise);
if (this.video.nativeElement) {
(<HTMLVideoElement>this.video.nativeElement).pause();
(<HTMLVideoElement>this.video.nativeElement).currentTime = 0;
(<HTMLVideoElement>this.video.nativeElement).play();
this.isVideoPlaying = false;
}
}
I tried to set a timeout on the if statement to see if the pause() or play() started before the video was fully loaded (i stopped testing after a 3 second timeout) but it doesn't seem to come from there
Here is the HTML of the video being loaded
<video class="ion-no-margin" #video
*ngIf="exercise?.video" playsinline loop preload="metadata"
[ngClass]="{'preview-video': !isExerciseStarted}" tappable (click)="onTapToggleVideo()"
[poster]="exercise.thumbnail">
I have no idea WHY it does not work just for Android.

How to check if webview YouTube video player was started

In my Android app, I have a webview where there is an embedded YouTube video inside the webview. My app has a native AdMob banner.
I'd like to hide the native admob banner from the app when user plays the video, so the banner does not show while the video is playing and then show the ads again when the video stops playing
The issue is that I do not know how to check if the video was started or stopped.
Any idea how this can be done? Thanks much.
One of the suggestions I think of is to set your AdView's visibility to GONE and also call mAdView.pause() the AdView while the video is playing. This should prevent any additional requests being made to AdMob. Once the video is done playing and you want to show your banner again - you should set the AdView's visibility to VISIBLE and call mAdView.resume()
The communication between webview and native are done through JavascriptInterface. YouTube has built it's API in a similar fashion. you can use the below code to achieve what you want.
To achieve the play/pause functionality via Youtube video you can use YouTube JavaScript Player API.
Example:
<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>
When the API is fully loaded, it looks for a global function called onYouTubeIframeAPIReady() which you should define.
Your code should look something like this
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}
Just make two buttons and call the needed method on click.
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
You can use JavascriptInterface to get the callback inside the native java/kotlin code from WebView.
More details info
Youtube javascript player API with example
JavaScript Interface with example
I am using jquery to show my videos along wither other contents and the admob. It should apply to your case too as you are using webview.
You need to detect the event - onPlayerStateChange. Check this question which shows the code and prerequisties:
Check if YouTube video is playing and run script
why don't you use default videoview to play youtube videos it'll make easier communication between admob bannner and played video apply same logic as mentioned by kasiopeous

getUserMedia frozen at first frame on Android Chrome

I have a working code on desktop browsers supporting getUserMedia Api, I can correctly see a video preview of my webcam in the div videoPreview. However, when running on Android device, this same code takes a picture with my front camera when I accept to share it in Chrome browser, then the preview keeps frozen on this first frame.
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
navigator.getMedia(
// constraints
{video:true, audio:false},
// success callback
function (mediaStream) {
var video = document.getElementById('videoPreview');
video.src = window.URL.createObjectURL(mediaStream);
video.play();
},
//handle error
function (error) {
console.log(error);
}
)
For those encountering same problem : I fixed it by adding autoplay attribute to my <video> tag.
Was stuck with this for a while, I hope this will help someone else.
A colleague of mine and myself had the same issue today: working code didn't work anymore and the camera was frozen. Surprisingly (or not), a reboot fixed that problem.

html5 video tag to play full screen with Android

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.

HTML5 video will not loop on Android devices

After some hours of trying, I want to ask how to loop a video on Android devices using the HTML5 video tag.
To be some kind of browser independent, I included video.js to play the videos. Everything worked fine for Firefox and Chrome, but on my Android device (SSG3 with Android 4.0.4) the video won't start or loop.
<video id="model_video" autoplay loop preload="auto" data-setup="{}" width="90%" height="90%" poster="images/black.jpg">
did not start the video. But this was easily solved by calling video.start() in JS. But looping does not work with that. Even if the loop attribute seems to be supported, it causes problems. With attribute loop=false or even with the missing loop attribute, it is still set to true.
There are a couple of websites pointing out that there is the need of adding an eventlistener. But unfortunately, it didn't work.
The solution is to set the loop attribute to false using JS. Even with loop=false as an attribute of the video tag or with missing loop attribute, video.loop returns true. So to get the looping done, the following snippet did the trick:
var video = document.getElementById("model_video");
//this did the trick
video.loop = false;
video.addEventListener('ended', function() {
video.currentTime=0.1; video.play(); }, false);
video.play();
Cheers!

Categories

Resources