I run video ads on my site. I've been trying to detect ad clicks on my video ads. I would like help detecting clicks on the videos/ rich media ads (3rd party)
So the video ads are flash videos.
Here is an example.
<script type="text/javascript">
var vaunit_unit_type=0;
var vaunit_width=300;
var vaunit_height=250;
var vaunit_id=4320;
</script>
<script type="text/javascript" src="http://syndication1.viraladnetwork.net/getad/"> </script>
I would really appreciate any help at all. Even if it's a link or a search keywork
The Flash video isn't part of the browser; the browser mainly leaves space empty on the page and then tells Flash the boundaries of the empty area. When the video is rendered, Flash will create a new window in that empty area which is why the browser can't detect any mouse events inside of that window as soon as it gets the focus (i.e. when you click inside of it).
This is why you can't put an element in front of a Flash video (like an invisible div): The Flash window is on top of the browser window; the browser can always only render "below" it.
So to do what you want, you will need the source code of the Flash video player. That will allow you to add mouse listeners and detect mouse clicks.
var clickcount=0;
$( 'div #videospace a' ).click(function() {
clickcount=clickcount+1;
});
Add this in another script tag its a solution of your problem you will get click count from clickcount var as if you diagnose your add iframe having clicable link which shows the add with popup is under din with id="videospace"
if you want click on advertiser and publisher are also counts then add one more function with it
$( 'div #directlinksa' ).click(function() {
clickcount=clickcount+1;
});
Related
I have multiple pop ups on one page. each pop up not coded with bootstrap, has a bootstrap carousel inside it. within those bootstrap carousels there may or may not be a vimeo video.
The issue were having is stopping the video from playing on dismiss of the popup or pressing the left and right buttons because with there being multiple videos in different carousels the script below copies the video from the first src it finds and replaces every video with that src.
I've tried using closest() and find() and also tried both of those on the script within the click function to say (this).closest($frame) but this doesn't work either.
Any help would be greatly appreciated.
function stopVideo() {
var $frame = $('iframe#nofocusvideo');
// saves the current iframe source
var vidsrc = $frame.attr('src');
// sets the source to nothing, stopping the video
$frame.attr('src', '');
// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
}
$(".carousel-control-prev").click(function(){
stopVideo();
});
$(".carousel-control-next").click(function(){
stopVideo();
});
$(".fa-times").click(function(){
stopVideo();
});
var $frame = $('.carousel-item.active').find('iframe'); fixed this issue
I’d like to place interaction controls above a youtube iframe video, and I got it working quite OK by just adding wmode=opaque as arguments and then position the elements absolute above the iframe.
My problem is that on mobile safari - the controls work fine first, but when I return from the fullscreen video, they are all disabled. It works fine on desktop though.
The HTML is basically:
<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>
And then the button is positioned absolute above the iframe.
For a demo, please visit this fiddle using your mobile safari: http://jsfiddle.net/SwGH5/embedded/result/
You’ll see that the button yields an alert when clicked. Now, play the video and click "done". Then try to click the button again...
If the movie was embedded using the <video> tag I could listen for a fullscreen-end event and do something, but now I’m stuck...
Here’s the fiddle: http://jsfiddle.net/SwGH5
So I played around with the iframe API a bit and found a solution. It's kind of hacky... but not really. When a user clicks on the video to play it, the document.activeElement becomes the iframe. When the user clicks the "done" button, the document.activeElement === document.body. So when the video starts playing, we periodically check to see if the active element returns to the body. At that point, the only solution I found was to redraw the iframe. In the example, I destroy() the video and recreate it using the iframe API. I also tried cloning the iframe and replacing it with success (I left that code there so you could see it):
http://jsfiddle.net/ryanwheale/SwGH5/105/
It's not the best solution, but it works. Also, to give an explanation of what [I think] is happening - iOS hijacks any video content (Safari or Chrome) and plays it using the native video player. Any type of OS functionality like this takes place "over" the browser if you will - higher than any z-index... completely outside the browser. When the user clicks "done" the native player kind of zooms out as if it is re-implanting itself on the page. My best guess is that the native player is still hanging out "over" the browser... thus making anything underneath it inaccessible. The fact that the button appears to be on top is just an anomaly... for lack of better description.
EDIT: Ryan Wheale's solution is a better workaround to this problem and will work in most cases.
From Apple’s documentation:
On iOS-based devices with small screens—such as iPhone and iPod touch—video always plays in fullscreen mode, so the canvas cannot be superimposed on playing video. On iOS-based devices with larger screens, such as iPad, you can superimpose canvas graphics on playing video, just as you can on the desktop.
Same goes for a "played video" either. This article clearly states it's not possible.
Workaround:
You could detach and re-attach the iframe element on webkitfullscreenchange. But it won't work for a foreign iframe. Browser will not allow you to manipulate iframe DOM bec. of the cross-domain policy. And even if it did, you could only hide the video overlay to reach your button anyway.
So, the only solution is watching for YT.PlayerState.ENDED state via YouTube iFrame API and then destroying and re-creating the player. But don't worry it plays smooth.
window.onYouTubeIframeAPIReady = function () {
var video = {
player: null,
create: function () {
// first destroy if we already have the player
if (video.player) { video.player.destroy(); }
// create the player
video.player = new YT.Player('ytp', {
videoId: '9u_hp7zPir0',
width: '620',
height: '290',
events: {
'onStateChange': video.onStateChange
}
});
},
onStateChange: function (event) {
// YT.PlayerState.ENDED » exiting full screen
if (event.data === 0) { video.create(); }
}
};
video.create();
};
Here is the working fiddle.
If you can't get it to work with the regular iframe, you might want to consider using mediaelement.js - which can wrap the Youtube API in a HTML5 Media API wrapper. That works fine on safari on ios - try the Youtube example at mediaelementjs.com.
All you need to do is to add the mejs js/css and put your youtube video as source in your video tag, here is some example markup taken from mediaelementjs.com:
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
Then start the player like so:
jQuery(document).ready(function($) {
$('#player1').mediaelementplayer();
});
If you want to add your button ontop of the mejs player it will work fine, just set the z-index high enough. If you want a regular play button you could also consider styling the existing one that comes with mejs.
By the comments from #CullenJ's answer, possibly it might be due to some problem in iOS device browsers not triggering the click event on iframe elements. In that case, you would have to change from:
document.getElementById('btn').onclick = function() {
alert('clicked');
}
To something like this (as answered by #smnh):
$('#btn').on('click tap touchstart', function() {
alert('clicked');
});
I have the follow script to load the lightbox,
$(document).ready(function(){
$('.TESTER123').nivoLightbox({
effect: 'fade',theme: 'default',
beforeShowLightbox: function(){
$('.TESTER123').hide()
},
afterHideLightbox: function(){
$('.TESTER123').show();
},
beforeHideLightbox: function(){
var e = jQuery.Event("keydown", { keyCode: 1 });
jQuery(".nivo-lightbox-content").trigger( e );
}
});
});
in the beforeHideLightbox function, I want to to generate a mouse left click event or space key press event so that when I close the lightbox window the video should pause playing, currently it keeps playing in the background. So I want to genenrate 1 of these two events inside the video frame that is the .nivo-lightbox-content or in center of the screen since the video will always be at the center.
Thanks in advance
I have faced this situation only on IE. on other browser it will automatically stop the video when lightbox closes or removed.
For IE, if it is a custom flash player you should create a function inside flash player to stop the video and trigger that function inside flash player using js.
If you are embedding youtube player, you cannot use direct embedding code. you should go for youtube api, so that you can control the player using js.
Problem is with the plugin nivo lightbox. When you click outside the video container is not removed from the page, instead it just fades out, so why the video is playing inside the faded out div.
Something wrong with plugin, since its compressed unable to show which line. Instead you can use plugin like this http://www.jacklmoore.com/colorbox/example1/
Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });
It has been discussed that autoplay is not working on mobile devices Apple as well as Android (Youtube autoplay not working on mobile devices with embedded HTML5 player).
However in order to not destroy my website performance I am only loading images and adding IFrames as soon as a user clicks as demonstrated by this tutorial (https://lean.codecomputerlove.com/make-your-own-lightweight-youtube-player/).
Essential idea is to add only HTML with the data attribute and image:
<div class="video__youtube" data-youtube>
<img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg" class="video__placeholder" />
<button class="video__button" data-youtube-button="https://www.youtube.com/embed/VIDEO_ID"></button>
</div>
And later on add the IFrame via JavaScript as soon as the user clicks:
function createIframe(event) {
var url = event.target.dataset.youtubeButton;
var youtubePlaceholder = event.target.parentNode;
var htmlString = '<div class="video__youtube"> <iframe class="video__iframe" src="' + url + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>';
youtubePlaceholder.style.display = 'none';
youtubePlaceholder.insertAdjacentHTML('beforebegin', htmlString);
youtubePlaceholder.parentNode.removeChild(youtubePlaceholder);
}
However as Youtube autoplay does not work on mobile devices the user has to click two times for the same action which is inacceptable in terms of user experience. Therefore my idea is to trigger a click within the IFrame as soon as it is loaded (as the user already has clicked). Is there any possibility to achieve this?
I'm not sure if it works when the back element is an iframe, but you can try the css pointer-events: none property.
Put the image covering the iframe, the click should go through the image and fire right on the iframe, then you could listen to some youtube callback to remove the image.
So, the iframe will be there from the beginning but covered with the image instead of inserting it after the image is clicked.
https://css-tricks.com/almanac/properties/p/pointer-events/ check this example, you click through a div in front of another.