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
Related
I'm working on an app where one part of the process is shooting a video, then uploading it. I'm using react-native-video to display the preview after the user has finished recording, and react-native-camera for the capturing process. I also use react-navigation to move between screens.
Currently I can get to the preview screen and set the video component's source uri from Redux. However, there is no player to be seen. The uri is in format "file:///path/video.mp4", so apparently it should be in the app cache as intended.
First the user is presented with a camera, where s/he can capture the video.
const recordVideo = async () => {
if (camera) {
const data = await camera.current.recordAsync()
if (data) {
dispatch(saveVideo(data)) <-- CONTAINS THE URI
navigation.navigate(CONFIRM)
}
}
When stopRecording() is called, the promise obviously resolves and the video's URI will be dispatched to Redux. Afterwards we navigate to the "confirmation screen", where the user can preview the video and choose whether to shoot another or go with this one.
My problem is, I can't get that preview video to play at all. I think I've tried pretty much everything within my power by now and I'm getting really tired of something so seemingly simple being so overly difficult to do. I've gotten the video to play a few times for some odd reason, so it's not the player's fault. At best what I've achieved is show the preview once, but when you go back and shoot another, there's no video preview anymore. Also, the "confirm" screen loads photos normally (that were taken in the same manner: camera -> confirm), but when it's the video's turn, it just doesn't work. The video component's onError handler also gives me this: {"error": {"extra": -2147483648, "what": 1}} which seems like just gibberish.
PS. yes, I've read through every related post here without finding a proper solution.
Use Exoplayer
Instead of using the older Media Player on Android, try using the more modern Exoplayer. If you're on React Native 0.60+, you can specify this in your react-native.config.js by doing the following:
module.exports = {
dependencies: {
"react-native-video": {
platforms: {
android: {
sourceDir: "../node_modules/react-native-video/android-exoplayer"
}
}
}
}
};
I was experiencing the same issue and this solution worked for us. Note, we're only supporting Android 5+ so not sure if this will work with devices older than that.
https://github.com/react-native-video/react-native-video/issues/1747#issuecomment-572512595
I just wanted to know how to disable the youtube icon that comes in the YouTubeStandalonePlayer. Is it possible?
I don't want to take the user to youtube on clicking the icon. Is there any way to disable the youtube icon?
The below is the code how I am playing the the video using the YouTubeStandalonePlayer.
String videoId = getVideoId(cardsInfo.getCard_video_url());
Intent intent = YouTubeStandalonePlayer.createVideoIntent(getActivity(), getResources().getString(R.string.android_key), videoId, 0, true, false);
startActivity(intent);
According to the API, you can't.
But, you can try and use the other (not standalone) classes, which might give you better control as suggested in the docs: There are two ways to play videos. The first option is to place a YouTubePlayerFragment or YouTubePlayerView in your View hierarchy and then use the YouTubePlayer to control video playback in the View. **This gives a fine control of the experience**. If they don't let it, you could atleast have better control of the flow/UI-visibility because you are controling the Activity (in contrast of giving the control to the standalone activity)
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.
I've implemented SoundManager 2 on my webpage which all works fantastically well in every browser I've thrown at it so far.
When I test on desktop, there is very little lag between clicking the div and hearing the sound played.
However, on Android there is always a lag of about a second the first time the sound is played. After that, there is hardly any lag at all.
Is it possible to reduce or remove the first time played lag on Android?
Here is the code I'm using
$(document).ready(function() {
soundManager.setup({
url: 'www.mysite.com/swf/',
preferFlash: false,
onready: function() {
soundManager.setup({
defaultOptions: {
autoLoad: true,
autoPlay: false
}
});
soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
}
});
$(document).on("click",".wrapper",function(e){
soundManager.play('mysound');
}
}
I've tried manually loading the sound like this
var preload = soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
preload.load();
But that made no difference!
Anybody had this working without a lag on Android?
I believe the problem is to do with android's policy of only allowing sound to play in response to a user input.
eg: Autoplay audio on mobile safari
This is a limitation in mobile browsers.
the reason you have lag is from the fact that the sound has to load the first time you click. Your preloading does not work, as it is not run in response to user input, and is therefore blocked.
A solution would be to implement a welcome screen that loads the sound upon hitting an 'enter' button, as the top comment of the above link describes.
If you only need this to work on one browser you can navigate to
chrome://flags/#disable-gesture-requirement-for-media-playback
on your android phone and click Enable
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);