I am trying to remove an iframe from the DOM when the user leaves my Ionic app so the YouTube video stops playing.
I am using the pause and resume events:
$ionicPlatform.on('resume', function() {
$rootScope.$broadcast('onResume');
});
$ionicPlatform.on('pause', function() {
$rootScope.$broadcast('onPause');
});
The pause event is triggered when I leave the app and the resume event is triggered when I open it again (I checked the time to make sure they were not both triggered on resume) but the iframe is not removed from the DOM.
I use ng-if="showVideo" on the div wrapping the iframe and $scope.showVideo = false; to remove it:
$scope.$on('onPause', function () {
$scope.showVideo = false;
alert(Date.now() / 1000);
});
It works perfectly when I switch pages using the beforeLeave event:
$scope.$on('$ionicView.beforeLeave', function () {
$scope.showVideo = false;
});
Is there some kind of limitation on what Ionic can do when the app is in the background? Are there other ways to stop a video when the user leaves the app?
I solved it using the YouTube iframe API:
$scope.$on('onPause', function () {
$('iframe').each(function () {
this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
});
It turns out that we can't modify the DOM when the app is in background mode but we can communicate with the iframe.
Related
I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!
This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)
I just figured out how to detect click event on a cross domain iframe but it's only working for desktop, the following code works when detecting the click event inside the iframe, however, I also need it to work on mobile devices, I tried to use the touchstartand touchendevents to add mobile support to this script, but it's not working.
//Google ADs track conversion
$( document ).ready(function() {
var iframeMouseOver = false;
var iframeTouched = false;
$("#wh-widget-send-button")
.off("mouseover.iframe").on("mouseover.iframe", function() {
iframeMouseOver = true;
})
.off("mouseout.iframe").on("mouseout.iframe", function() {
iframeMouseOver = false;
});
//Add mobile support to this script
$("#wh-widget-send-button")
.off("touchstart").on("touchstart", function() {
iframeTouched = true;
})
.off("touchend").on("touchend", function() {
iframeTouched = false;
});
$(window).off("blur.iframe").on("blur.iframe", function() {
if(iframeMouseOver || iframeTouched){
console.log("Iframe Clicked");
gtag_report_conversion();
}
});
});
UPDATE
The HTML as requested, it's just a simple iframe inside a div, also cleared the above code a bit to focus on the important part:
<div id="wh-widget-send-button">
<iframe src="http://anyexternaldomain.com"></iframe>
</div>
I am not sure why you need to check for hover or touch. You can just check for click and perform the action.
The main concept is to remove event handling from iframe by assigning pointer-events:none;. This will make the parent element wh-widget-send-button receive all events and then you can handle them as needed.
You can try this code:
$(document).ready(function() {
$("#wh-widget-send-button").off("click").on("click", function() {
console.log("Clicked");
// gtag_report_conversion();
});
});
iframe
{
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wh-widget-send-button">
<iframe src="http://anyexternaldomain.com"></iframe>
</div>
Unfortunately, what you are trying to do is impossible. The developers of web browsers have purposefully made it so, in order to avoid the malicious practice of clickjacking. You cannot catch a click that goes into an iframe. What you are currently doing on desktop is only tracking whether the mouse hovers over the iframe, not whether it is actually clicked. Unfortunately, you cannot do even this on mobile, because the touch on the touchscreen is automatically transmitted to the iframe, there is no such concept as "hover" as it applies to touch screens. Sorry to drop bad news on you.
I am using a jquery code to automatically run the video on desktops, with all versions of safari on mac it works except the the latest one which is high sierra, i am trying every possible combination to run it, no matter how apple sees it,
I had the code which mostly works
function startVideoIfNotStarted () {
window.setTimeout(function(){
var play = document.getElementById("player");
play.addEventListener("load",function(){
player.play();
})
}, 800);
}
startVideoIfNotStarted();
Now i am trying to use the click event to trigger itself but i am little bit confused on the code how should i do
setTimeout(function() {
var play = document.getElementById("player");
play.addEventListener("click",function(){
player.play();
})
}, 1000);
Not exactly sure what you're looking to do, but if you're trying to simulate a click on the video to play it, you could try something like:
$(document).ready(function(){
$('#player').trigger('click');
//handle the click event
$('#player').on('click',function(){
play(); //or whatever you're trying to accomplish here
});
});
If it's anything like a youtube video, just triggering the click on it should play it I believe?
Video in a Bootsrap modal continues to play when the modal is closed.
I have found solutions for YouTube video and html5 video but i am using Vzaar Video and Vzaar's API java script
I have it working from the close button in the modal (using id="video-btn") but I really need it to work also if clicking outside of the modal, or I guess on data-dismiss="modal", which should cover all (?).
Not being great with java, help would be appreciated.
My code just for the close button (which works fine) is below.
// Vzaar
window.addEventListener("load", function() {
var player = new vzPlayer("vzvd-XXXXXXX");
// adding pause() API method to DOM element:
var myPauseButton = document.getElementById("video-btn");
myPauseButton.addEventListener("click", function() {
player.pause();
});
});
I have solved it:
// add listener vzaar video //
window.addEventListener("load", function() {
var player = new vzPlayer("vzvd-xxxxxxx");
// adding pause() API method to hidden.bs.modal: //
$('#myModalId').on('hidden.bs.modal', function () {
player.pause();
});
});
(of course http://player.vzaar.com/libs/flashtakt/client.js needs to be included)
I want to autoplay video in fullscreen. I searched and found out that Fullscreen API can be used to do this and found out that code similar to this can be used.
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
This code works fine. But this will need some triggering event like mouse click or some keyboard input. But is it possible playing a video automatically in fullscreen without any triggering event as soon as the html file is opened?
Nope. From MDN:
NOTE: Fullscreen requests need to be called from within an event handler or otherwise they will be denied.