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.
Related
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.
We got this assignment from school to reproduce this example (created in Flash) into plain Javascript, HTML and CSS (jquery/Mootools not alllowed). Now i got the grid right, but i can't figure out what function to use to zoom into all the images at once? What would be a solution? One that crossed my mind is onClick every image goes in to the real size and using Javascript to disable the toolbars and then using keyarrows to navigate? Or is there a simpler way?
http://www.simpleviewer.net/postcardviewer/app/
Javascript / jquery would be best way to do so
MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it.
It places a square to the right of the image with the magnified portion of the image.
In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version.
The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work
refer http://www.nihilogic.dk/labs/mojozoom/
also refer 5 Amazing JavaScript Image Zoom Scripts
I am having an interesting problem. I want to have a box with a border overlaid on top of a vlc web player. I can get it to work just fine if the background color is not transparent, but as soon as I set it to transparent, it gets drawn behind the player. Does anyone know how to get around this?
Here is a jsfiddle that shows what I am talking about (You need to have vlc web plugin installed in order for this to work. Additionally, you can only do overlays with firefox, for some reason).
http://jsfiddle.net/AsGuL/21/
This post is old, but if someone with the same problem find it (like me), here is the solution :
VLC plugin have the attribute "windowless" you can use in this situation.
Just add windowless="true" in the embed tag.
From the documentation :
windowless: (since VLC version 2.0.6) Draw the video on a window-less (non-accelerated) surface and allow styling (CSS overlay, 3D transformations, and much more). Default: false
https://wiki.videolan.org/Documentation:WebPlugin
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.
I did a lot of research about this topic and didn't yet find a satisfying answer:
How can I make a scrollable list (iPhone SDK Dashboard List) inside some other html content? If I create a list inside a html body and I try to scroll the whole page is scrolled. I know there is this "double finger" scrolling, but that's not what i want.
Is there some way to prevent the whole iPhone Safari Webpage from scrolling and instead letting other lists inside scroll? Like redirecting java script events?
Background: the idea is to mimic a real native application behavior with tabs at the bottom and a selection list in the body.
Appreciate any hints!
Thanks,
Patrick
there is yet another possibility, with slightly nicer scrolling simulation:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
Ok, after consulting some friends, I found the answer to this question:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
have fun.
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
this is a really great script!! It's smaller than the doctyper version and easier to work with since it doesn't have so many elements being repositioned. It also allows contained elements to be touched easier by the user. and even cooler, when you touch into a text field and the close the type panel the divs being positioned by this script snap right back into place (where as the doctyper version just has them floating out of place after the type screen retracts).
A very nice script.
A new scrolling library to keep an eye on: Scrollability.