Develop Reference

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

Cordova - how to play mp4 video in fullscreen and in loop?

I would like to play given mp4 video file in the fullscreen and in the loop.
Is existing some plugin for this?
I found the videogular library for Angular based apps.
http://www.videogular.com/docs/#/api/com.2fdevs.videogular.directive:vgLoop
But i don't know it is the right choice for what i need.
I can be something lightweight. I need only play in fullscreen and in the loop wit possibility to close the video (no sound, seeking in video, timeline, etc..).
Many Thanks for any advice.

With Videogular you have all those requirements covered. Probably you need something pretty basic like this:
http://www.videogular.com/examples/simplest-videogular-player/
You can fork the codepen and add the loop capability. To do the fullscreen on play you can add an ng-click to the vg-overlay-play plugin with an API.toggleFullScreen() for example.
HTML
<div ng-controller="myController as ctrl">
<videogular vg-player-ready="onPlayerReady($API)" vg-loop="ctrl.config.loop">
<vg-media vg-src="ctrl.config.sources"></vg-media>
<vg-overlay-play ng-click="API.toggleFullScreen()"><vg-overlay-play>
</videogular>
</div>
JS
angular.module("myApp").controller("myController",
function myController($sce) {
this.API = null;
this.config = {
loop: true,
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
};
this.onPlayerReady = function onPlayerReady(API) {
this.API = API;
};
}
);
I've not tested this, but it should work or close to.

YouTube Embeded Player on Android 4.3

I'm trying to embed a YouTube player into my webpage as below.
The problem I'm having is, the player initially loads and plays the first video fine, but when .loadVideoById is called the player looks to load the video (video title text changes) but then gets stuck on a black screen instead of playing.
This is only happening on Android, with the HTML5 player (both Chrome and the default browser) since updating my phone to Android 4.3, having previously been fine on 4.2.
It works fine through a desktop chrome with the useragent set to fake an Android.
I've also tried on two other Android phones and are having exactly the same problem on both (both are also 4.3). I'm also getting the same behaviour intermittently, using the Google Code Playground Example Youtube Player.
If I attach the ADB Chrome remote debugger, I can see the player get stuck in the buffering state, although video fragments are being downloaded, as expected.
Has anyone experienced anything similar? Or has any suggestions?
Code:
<div id="ytwrapper">
<div id="player" >
</div>
</div>
<script type="text/javascript">
var ytplayer;
2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "http://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.
function onYouTubeIframeAPIReady()
{
ytplayer = new YT.Player('player', { width: 1280,
height: 720,
videoId: 'M7lc1UVf-VE',
frameborder:0,
events:
{
"onReady": onYouTubePlayerReady,
"onStateChange": onytplayerStateChange,
"onPlaybackQualityChange": onYTQchange,
"onError": onYTError
}
});
}
function loadnextvid()
{
ytplayer.loadVideoById(vids[currentvid],0, vqs[currentvid]);
}
function onYouTubePlayerReady(playerId)
{
loadnextvid();
}
</script>

I had the same issue. Looks like the only way to fix this for the moment is to destroy and recreate the player instance.
I found this solution here: https://code.google.com/p/gdata-issues/issues/detail?id=5273
Works for me Android 4.4, iOS7.
if (player != null) {
player.destroy();
player = null;
}
player = new YT.Player('divplayer', {
width: '100%',
height: '100%',
videoId: video_id,
playerVars: { 'autoplay': 0, 'playerapiid': 'ytPlayer', 'border': 0, 'hd': 1, 'version': 3, 'rel': 0, 'color' : 'red' },
events: {
'onReady': onPlayerReady
}
});

Titanium Android videoPlayer loads, has endPlaybackTime, just won't play

I'm trying to play a video on Android and having some weird issues, I've stripped my code right back to the following to try and separate it from any view issues elsewhere in my app...
the file does seems to be loading, the following comments are the console log which shows it has the video file size and playable duration. However, the playback controls show 0 length, and just a black screen. The video is an mp4, it plays fine, I can only assume the emulator/devices I've tried this on support the format and it's not corrupt, as they are able to read it's duration... what else could stop it playing?!
var file = Ti.Filesystem.getFile('file:///data/data/com.app.applite/app_appdata/master/D9E3BC7A_225C_458B_B298_C4.mp4');
console.log('Size: '+file.size); // Size: 269245
var activeMovie = Titanium.Media.createVideoPlayer({
url : file.nativePath,
backgroundColor : 'blue',
movieControlMode : Titanium.Media.VIDEO_CONTROL_FULLSCREEN,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FIT,
fullscreen : true,
autoplay : true
});
activeMovie.addEventListener('loadstate', function(evt) {
console.log( JSON.stringify(evt));
// "playableDuration":8315 Correct duration!!!
// {"type":"loadstate","source":{"autoplay":true,"currentPlaybackTime":0,"bubbleParent":true,"playableDuration":8315,"rect":{"height":854,"y":0,"x":0,"width":480},"keepSc reenOn":false,"url":"file:///data/data/com.app.applite/app_appdata/master/D9E3BC7A_225C_458B_B298_C4.mp4","size":{"height":854,"y":0,"width":480,"x":0},"volume":1," endPlaybackTime":8315,"backgroundColor":"blue","playing":true,"playbackState":1,"mediaControlStyle":2,"duration":8315,"movieControlMode":2,"scalingMode":2,"initialPlaybac kTime":0,"loadState":1,"backgroundRepeat":false,"movieControlStyle":2,"children":[],"fullscreen":true,"_events":{"loadstate":{}}},"currentPlaybackTime":0,"loadState":0,"b ubbles":true,"cancelBubble":false}
activeMovie.play();
});
// Tried with and without these, makes no difference
activeMovie.show();
activeMovie.play();

Android HTML5 Video in Fullscreen Mode

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);