I have a Flash/Flex object (Flashlight-VNC), which I would like to dynamically resize to fit the entire window after pressing a button in the Flex app. This would preferably happen without restarting the Flex app (and therefore the VNC session). I would just use the built-in Flash fullscreen mode, however Adobe's somewhat silly security restrictions prevent keyboard input while in fullscreen mode.
How exactly can I do this? I'm already using SWFObject to embed the SWF, if that helps. I am open to any solution utilizing ActionScript, JavaScript, or both, however I am not all too familiar with ActionScript or Flex, and the AS-based solutions I have found involve extending a "Sprite" object to add resize functionality, which Flashlight-VNC does not seem to use.
I see that there is a very similar question already posted on this site, however the accepted answer points to one dead link and another link that does not answer my question (my goal is to resize the object on command, not from when the page loads).
Thanks!
This really isn't related to flash. It's more about HTML DOM manipulation. You want to make sure your Flash SWF is set to use 100%/100% and then when you want to trigger "full screen" mode change the html container to be placed in the top-left-most corner and have a width/height of 100% of screen.
You'll still have the browser's toolbars and tabs and address bar, but if you want keyboard input there aren't many options.
Related
What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view.
For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not.
[![enter image description here][1]][1]
However, I'm interested in measuring what percentage of the viewport/page for the Background window is visible to the end user, and/or what percentage of the page for the Background window is not visible. Or, an alternative approach could also be to simply determine whether an element (by ID) is in view on the Background window or it's obstructed by any foreground windows.
After extensive Googling and Stack Overflow searching, I'm not finding a solution for what I'm trying to achieve. This could obviously be due to technical impossibility, but I wanted to ensure I've left no stone unturned in troubleshooting.
The use case here is that I'd like to be able to pause videos and animations, etc. when a given element is not visible on the page -- not just when the window is not active at the moment, since users can often have windows arranged side-by-side, and might want to watch a video while multi-tasking. even though the window might be active at a given moment. Conversely, if a window is covered up, the desire here (for business purposes) is to pause the video, so we are not serving videos (or video ads) when a player is out of view.
I am searching for a free javascript image slider, which allows me to go fullscreen like on the youtube player or any other video player. Unfortunately I can just find sliders, which allow me to use the whole browser window, but they do not hide the windows explorer bar and the browsers bar.
I would be very pleasent for any advice.
With regards,
Andrej
Actually you will not find a slider that does that automatically ... even if it has a full screen mood included ... still wouldn't hid the browser windows explorer.
If this feature is a must for you, you may search for a JavaScript/JQuery code that manipulates the window attributes (ex: width,height, ... etc).
There's a thread on Stackoverflow that discuss the same issue ... you may check this link
Vide.js will be helpful for making full screen video player.
If you are making an image slider then go for any framework and choose sliders. In CSS make width 100% height:100% and overflow: hidden to prevent scrollbar.
I have a Chrome extension that inserts a menu into the page, but whenever any flash or html5 video player goes full screen, anything outside of the video player is invisible.
Could I have two objects in full screen at the same time (one over the other), or is there another way to do this? I would rather not have to insert the html specifically into different places on different websites, because of the large variety of existing video players. The solution should be universal for all video players.
EDIT:
Since then, a lot of the web has moved to using html5 instead of flash, so this has become a very possible thing to do on almost all websites.
Here was the code I ended up writing and using. Hopefully this will help someone:
document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
//first, grab the page's fullscreenElement
var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;
if(fse){//if there is a fullscreened element
fse.appendChild(menu);//append the menu inside the fullscreened element
}else{//if nothing is in full screen
if(window.self !== window.top){//if we are in an iframe
menu.remove();//hide menu if we are in an iframe
}else{//if we arn't in an iframe
document.body.insertBefore(menu, document.body.firstChild);//show menu
}
}
});
This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.
It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.
edit: to expand further;
With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.
With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.
If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)
Unfortunately as #Collin Grady mentioned this is not possible since the browser takes care when you play a fullscreen video.
You can still simulate full screen tho! You could modify the size of the video to adjust to the size of the screen (or whatever size you require). By doing this you still have control on your elements and can show your menu on top of the video.
There is an article in CSS Tricks that could guide you on how to modify the dimensions of a youtube video. The writer of the article wrote a jQuery plugin too called FitVids.JS
By Simulating full screen you could show what you want on top.
I hope this helps
I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net