I have recently put an advertising box that overlays the embedded videos on my website. Users are forced to click the "CLOSE TO PLAY" button in order to close the advertisement overlay and play the video.
See it in action here: http://www.animefushigi.com/ao-no-exorcist-17/4
The problem: I have been getting complaints from PS3 users that the Close to Play button is not working on the PS3 browser, thus they are stuck with the ad overlay.
The button's javascript is as follows:
$(document).ready(function(){
$(".btn").click(function() {
$(this).closest(".olBlock").toggleClass("display");
});
});
Any suggestions on how to fix this?
The problem is, in the PS3 Browser (NetFront 3.1), the Flash plugin (video player) receives the Click event, instead of the HTML overlay.
Therefore, the only solution is to have a close clickable element outside the bounds of the Flash object, such as moving the "Close to play" psuedo button just after the video player. For aesthetics, you may prefer to leave the close button where it is & add the typical "[x]" close element in the top right corner, positioning this just above the Flash player.
If you need to test for the PS3 browser (may not be necessary, if you include the "[x]" element for all browsers), the user agent string includes "PLAYSTATION 3", so you could test for it on the client as follows:
var isPs3Browser = (navigator.userAgent.indexOf("PLAYSTATION 3") >= 0);
As far as I can tell, the jQuery.browser object can not be used to check for the PS3 browser, especially as the object may be deprecated.
Related
For some interactive graphics we are using canvas in our HTML page. Inside the canvas we have "link-like" controls to link users to external resources.
Because of canvas, we do NOT use <a href=""> tag, but we are opening new browser tab via JS code, like this:
this.pixiLayout.App.renderer.view.addEventListener('click', () => {
if (this.pixiLayout.externalUrl) {
window.open(this.pixiLayout.externalUrl, '_blank');
}
});
The problem:
Google Analytics(front end) show us much more clicks than actual "page views" analytics from third party resources, up to 10-20 times.
It means that users clicked on the link(and it recorded by GA), but by some reason, link was not opened, or opened but not loaded in a new tab.
I know about ad/pop-ups blockers. It could be a case for some percentage of users. But it is not a case for 90% of users, like we have.
And we could not reproduce this behaviour on any device we own.
Question:
Could it be caused by normal browser policy or restriction that could cause a blocking of new tab like in our case?
Could it be like "new feature" of modern browsers I do not know about yet?
Ok, the issue was in our own code. Event firing of GA(we use custom events) was implemented in the different place of the code than an actual action - window.open(). They were supposed to be called on the same user action - user click. But it was not a case, specially for mobile devices. When user tapped on that interactive, link-like control and moved finger up or down(for scrolling), it fired custom event responsible for tracking "the click". But actual "click" event is not fired in this case.
Conclusion: never ever do an actual action in one place and "collect analytics of that action" in another place of the code.
I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).
I have recently seen a play button in the tab menu which triggers an action in that page. (When opening a youtube video in a new tab)
Here is a picture of it:
Does anyone know how to add such a button?
(Picture made in Firefox Developer Edition - 57.0b13)
That is a browser feature, you can't "add" it, but it will automatically be displayed when you have an audio or video element on your site that is playing sound, giving users the possibility to mute and unmute sound for the specific tab.
You don't have to implement the icon by yourself. Chrome or any other modern browser automatically displays that icon when that specific tab makes a sound.
But if you want to implement a button by yourself,
You would want to alter the 'title' of the page with a Unicode icon when you start playing a sound. Not very practical method though.
I created a simple JavaScript function to display my pop-up window once it loads. But it keeps on being blocked by Firefox and Google Chrome and I have to somehow enable it on the Firefox and Chrome to display the pop-up.
Are there any alternatives for this?
I have a player on the pop-up window so I have to use a pop-up to let the player play automatically. The problem is that if I put it on the page itself, once the user clicks another page the entire page reloads and the player automatically stops for a few seconds until the whole page reloads and I have to prevent this from happening.
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Please take a look at dthorpe's answer here. It covers your question.
You could try putting the player on the original page, and using something like History.js to control page changes (you could have the main page body in one wrapper div that changes, and leave the player outside of it).
Otherwise, you could try (assuming you meant a HTML5 <video> or <audio> player) downloading the data to localStorage/cookie/[other persistent storage mechanism] and have it seek everytime you change a page.
It will be hard to stop browsers from blocking your pop up window, because any way to do so is inherently exploitable; however, if you call the function to open another window from an onclick event, you may be able to circumvent some popup blockers. Also, some popup blockers allow popups when using the https protocol, although not many have this feature, and https can be hard to implement for the average website, if you don't have physical access to the server.
One other option is to open the other page in another tab (like this w3c example; you can 'click' the link with javascript).
You might also want to look at this post, as it is somewhat similar.
I only just discovered you asked this question.
Here's the answer in full.
Basically, you can simply create the popup immediately as the user event is fired, then fill it with content (your player, for instance) as you have it available.
Are any events triggered when the close settings button is click in the Adobe Flash Player Settings window. I want to be able to move the containing div when the settings are closed.
Decided to go with a lame solution find if the click event within the containing div is located within the coordinates of the close button.
Far from perfect but will do for now...