So imagine that you're using an HTML5 video player library such as Videojs. You want to extend this library's functionality by adding an extra button, but for reasons not relevant to this question, you don't want to get into that whole plugin coding business, so you just stick the player inside a container and add an absolutely positioned button, such as:
<div class="player-container">
<video class="video-js"></video>
<button type="button" class="absolutely-positioned"></button>
</div>
The problem is that at some point you might click on the fullscreen button of the player and this will call requestFullscreen on the video element and the video element only. This means that your button or anything else on that container won't be on fullscreen mode.
On webkit browsers you can make the other elements remain visible on fullscreen by setting a z-index equal or higher to that of the video element on fullscreen mode. On Firefox the element needs to be changed to position: fixed (but you can't use the -moz-full-screen prefix to style it, because the element is not recognized as being on fullscreen mode) and on IE it's simply not visible.
I'm trying to find out whether fullscreen mode is restricted to a single element (and it's children) or if it's possible to have multiple fullscreen elements at once. Has anyone else struggled with something similar? Are there any workarounds?
I seem to have found the solution after inspecting Wikipedia's new image viewer (which displays buttons after becoming full-screen). The z-index does play a role, but the trick seems to be to call requestFullscreen on a container element encompassing your media as well as its custom control elements.
I have similar problem, but external library call requestFullscreen() for one of its elements which has id. In that case I just
document.getElementById('#libElementId').appendChild(myElement)
Related
EDIT FOR CLARIFICATION:
What I want:
A full screen javascript canvas which can handle touch events without those events being further interpreted by the browser, but also reserve the ability to open a new window on user action.
Examples:
I should be able to swipe my finger around without the webpage trying to scroll
I should be able to swipe my finger around without the contents of the webpage being nudged in any way (normally, when one scrolls to the end of a scroll region, the browser allows some additional spring-loaded buffer scrolling to signal to the user that it is the end of the scroll region).
I should be able to pinch and pan without the webpage zooming
etc...
The point:
I need to interpret these events accurately and in realtime MYSELF to respond to these actions WITHIN THE CANVAS. (I am doing realtime drawing via requestAnimationFrame, allowing me to react to user events without using the DOM)
The state of things currently:
This all works perfectly (except for the ability to open a new window) because I position the canvas to be the full size of the viewport (handling any window resize events), and the canvas listens to ontouchstart, ontouchmove, ontouchend, etc... events, calling evt.preventDefault() after I have handled the user input myself. This works to ensure the canvas is ALWAYS full screen, doesn't budge, and user input is accurately given to me to handle in-game.
The Problem:
One bit of user input I need to handle is the launching of a webpage when they click the region of my canvas with a "launch my webpage" button. However, window.open(mywebpage) doesn't work, because mobile safari only allows such an action in the callstack of a click event. Because I rely on ontouchstart to get responsive controls, and evt.preventDefault() in an ontouchstart event CANCELS the click event from happening, I cannot launch the webpage (it gets blocked by the browser).
My attempted solutions, and why they are insufficient:
Just use a click event rather than ontouchstart: this means I can't prevent scrolling/etc... additionally, it is not as responsive, and doesn't allow me to handle touch-and-drag events well.
Overlay a div (or an a) tag atop the canvas over the launch webpage zone, and add a click event to that: if the user clicks-and-drags starting within this tag, then it allows the page to scroll and zoom. Trying to fix this results in the same problem as before.
ORIGINAL POST:
I have a mobile application that is a full-screen canvas, which locks itself positionally (can't scroll or zoom) so that I can correctly interpret user input uninterrupted (swipes, pans, etc...).
It locks itself in by intercepting touchstart events and calling evt.preventDefault (as well as the meta viewport no-zoom stuff which as far as I can tell doesn't actually do anything?).
This works great, and is absolutely necessary to make a game (or game-like application) function.
The problem is that I also have a "go to this webpage" button. I can intercept the touchstart, and use window.open(somewebpage), but mobile popup blockers will block it. The "rules" seem to be "the webpage will be allowed to be opened iff it is done in the call stack of a user interaction, AND that interaction is a 'click' event".
I have the first part down, but if I change the event to a click event, the web page now interprets swipes as scrolls (and pinches as zooms, etc...). If I have both a click and a touchstart event, then calling evt.preventDefault() on the touchstart (which stops the scroll/zoom) also stops the click event.
If I overlay a div atop the click zone of the "launch webpage" button, then the player can scroll/zoom when their input begins in that button, which results in an unpredictable and wonky experience.
How can I launch another webpage without allowing the current webpage to scroll?
Edit: at request, here is a code snippet at least partially illustrating what I'm trying to do https://jsfiddle.net/phildo/0q8e47fk/10/.
Note that in the "real" case, the canvas takes up the full width/height of the screen, and is explicitly set accordingly on screen resize.
Preventing bounces of any kind on mobile web page is a vast problem through out the mobile devices not depending about the manufacturer. I had similar issue on Windows Phone 8 app years ago and there (quite surprisingly) was a solution dedicated to Windows environment which of course cannot applied here.
For iOS you need an iOS solution, right?
The very solution is named iNoBounce. The idea is to add the little js library to your html page, code with some good conventions and the js lib will do the dirty job of preventing the default when necessary.
The trick it actually does is not to prevent just anything, but the ones only, that are "extra" and will cause the bounce events.
With the words of iNoBounce GitHub Readme:
iNoBounce detects if the browser supports -webkit-overflow-scrolling by checking for the property on a fresh CSSStyleDeclaration. If it does, iNoBounce will listen to touchmove and selectively preventDefault() on move events that don't occur on a child of an element with -webkit-overflow-scrolling: touch set. In addition, iNoBounce will preventDefault() when the user is attemping to scroll past the bounds of a scrollable element, preventing rubberbanding on the element itself (an unavoidable caveat).
The example code asks you to use the following parts (there is a separate example code for canvas, this is only the most common solution):
// All you need is an element with `height` or `max-height`, `overflow: auto` and `-webkit-overflow-scrolling: touch`.
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
Source:
[1] https://github.com/lazd/iNoBounce
Edit:
I found out you did not limit yourself to iOS. For other browsers, try
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
which introduces overscroll-behavior setting, that you can set to none to disable bounces.
It will work only on Android, not ie or iOS.
For mobile Windows Phone I had the solution like this:
div.wp8ScrollFix {
-ms-touch-action: none;
}
which effectively does the same as iNoBounce, now with single CSS line for the div containing the canvas.
Edit2:
For a search of semi universal solution, I could find that
-touch-action: none;
applied to div element that includes the canvas, you can disable default touch events and for the canvas, define your own.
The solution works on any other than Safari browsers. As in [3] there may be some variants like
-ms-touch-action: none;
but I suppose they are now all same without prefixes. The [3] solution is very old and world has changed a lot from those days.
The sad thing is, the browser support is same at least 2019 [4] and maybe now also.
Sources:
[3] jQuery / HTML5 / gwt app for WP8 (Lumia 920) device: vertical css scroll fix
[4] https://css-tricks.com/almanac/properties/t/touch-action/
Problem
Show a div on top of full screen canvas element that intercepts normal click events on element canvas.
Solution
Aside from click events, you need to intrrcept the following touch events:
touchstart
touchend
touchmove
touchcancel
Additional Info
You only preventDefault on the canvas events so you should still be able to create a clickable/touchable element in the canvas that shows a div outside the canvas positioned with a z-index higher than the canvas element by setting on display: block on the div. The div should also have 100vh and 100vw set foe width and height respectively and be position: fixed. The div should also have a button to hide again display: none.
References
https://stackoverflow.com/a/51127296/806876
Youtube has rolled out the new feature - ability to scroll a page while watching a video in full-screen mode(sreen is below).
I have a html5 player on my website and want to implement the same scrolling in full screen mode.
At this moment I have no idea how Youtube did that. Could anybody explain it to me?
What appears to be happening is that the element becoming fullscreen is actually a wrapper around the video player, comments, etc. Youtube changes the player to the theater version and fits it to fill the screen, but scrolling reveals the rest of the content that was made full screen as well.
I found this fiddle showing a fullscreen demo, and I added on to it to sort of show the concept: http://jsfiddle.net/krtw58z0/
requestFullScreen gets called on the wrapping element. The dummy 'video player' can be styled however we please (I set width up to 100% when fullscreen), and you can still scroll to view the other child elements.
Docs: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
I want to create a custom video control, I mean over the video itself, with issues like double click on some x and y coordinates of the video to zoom In, but I can't get this result because the real player plugin API is not that flexible, then I Tried to create a transparent layer to handle those events and I can't achieve that the transparent layer sits on top of the video, I tried this list:
1.- Put a flash transparent movie over the real player plugin- not working the player breaks the z-Index and the video goes to the top.
2.- Put an Iframe transparent over the real player plugin- not working it puts on top, but when I make the Iframe transparent, the movie goes agains to the top.
3.- I tried to use the map html tag, also is not working.
4.-I tried to put and div absolute positioned, but z-index is not working.
I need some help with this topic.
thanks guys
There is no reliable way to force a browser to layer content on top of a plugin, because plugins like Flash just talk to the video/audio system rather directly and just paint in the bounding box the browser tells them to.
Obviously it's still experimental, and there's no IE support (without ChromeFrame), but was designed to solve exactly this problem.
If this was Flash you could use wmode=opaque or wmode=transparent as an alternative to the default wmode=windowed, which is much faster but causes problems with overlays like you describe. I've found no sign of an equivalent option for real player.
http://javafx.com/ would be my recommendation
I would avoid trying to mash several different technologies together to get what you want, It will make for a maintenance nightmare between different browsers and browser upgrades.
I think this is what you search for:
http://www.dynamicdrive.com/forums/showpost.php?s=4cc8a233f39321ad1ee9e01ec57a3bef&p=200817&postcount=10
You need the wmode = opaque to get the layer over the flash.
a place where you can find this working is, www.dtele.de .
If you open the navigation, you´ll see, tha it lays over the flash movie.
I need to make my dropdown menu apprear over the top of a flash movie, how is this done cross browser?
It can be done, IBM do it: http://www.ibm.com/us/ so do GE: http://www.ge.com/
Setting the the WMODE to transparent doesn't work for Firefox
Putting it into an Iframe doesnt work below IE7
Any one know the best way to achieve this?
Set the wmode to transparent and if necessary, use z-index as you would on any other element, that really should work for Firefox too.
here is an example with all three modes: opaque, transparent and no wmode at all
http://www.communitymx.com/content/source/E5141/wmodeopaque.htm
use transparent if you have something under the flash movie that you want visible,
opaque if you don't want to show what's underneath
and set a higher z-index for menu than the flash movie has
Firefox for linux shows flash on top of everything. Regardles of wmode or z-index.
EDIT:
I just found out that the Linux issue described above can be "fixed".
You need to add an iframe with a z-index between the swf and the layer you want to put on top of it. The iframe needs to have style="display:none" initially and you must use javascript to set display:block on it after the flash plugin has initialized. The Iframe will hide all swfs that are below it on linux.