2

The Setup
I have an embedded flash player set to fit the page (100%). Stretched over the whole page is a 1x1px transparent gif, to avoid people from clicking/focusing the player.

Dimensions of the visible part in this player can be read out via Javascript. Combined with "window.innerheight" + "window.innerwidth" and the mouse position in pixels mapping calculations are performed.

The Problem
This works good and great as long as the webpage is viewed at 100% zoom level. With different zoom levels, "window.innerheight" and "innerwidth" will adapt to the scaled pixels, but the player retains its original dimension values. This leads to wrong mapping.

References
My search through stackoverlow gave various references to zoom level detection, the most elaborate being: How to detect page zoom level in all modern browsers?. It seems like there are a lot of different ways that need to be implemented to cover all browsers though even then it's kind of hard to grasp which of those things still work and which don't.

As for how to change the zoom level I mainly stumble across code similar to: Disable zooming of the page in desktop web browsers using Javascript/Jquery
Though, here as well the answer might be outdated.

Question
So far I had no luck implementing a suitable solution based on these. Being a novice to Javascript it would be nice to clarify if it's my lack of knowledge or if I am working with outdated references.

Community
  • 1
  • 1
Frable
  • 21
  • 1
  • 3
  • Did you try stage.stageWidth and stage.stageHeight to set the player according to window.innerWidth and height? Just looking at adobe forums now,I'll check back in a mo – Billy Oct 22 '14 at 13:19
  • [SO duplicate question with a possible answer](http://stackoverflow.com/questions/833466/dynamic-stagewidth-and-height-in-flash-as3) – Billy Oct 22 '14 at 13:22
  • @Billy not sure if I can access or use them. The flash player in question is [flowplayer](http://flash.flowplayer.org/) so I am embedding an existing .swf object. The stage things would need to be added in ActionScript prior compilation, if I understand correctly? – Frable Oct 22 '14 at 13:54
  • Have a look [HERE, Flowplayer javascript API](https://flowplayer.org/docs/api.html). You can make the video fullscreen – Billy Oct 22 '14 at 14:03
  • Made a sample page to highlight the problem here: http://178.62.184.125/sample/Sample.html The player is already fullscreen. The problem is visible in the values in top right corner. Check how window width changes if you zoom in or out. – Frable Oct 22 '14 at 14:40
  • just found this [Flowplayer dynamic size](http://www.sitepoint.com/flowplayer-dynamic-video-size/).still fecking around with the code from your sample, trying the [clip() onResize method](http://flash.flowplayer.org/documentation/api/clip.html) at mo, Have you tried it? – Billy Oct 22 '14 at 15:45
  • Found the answer I think, You need the skins [Flowplayer skins Demo](https://flowplayer.org/demos/) – Billy Oct 22 '14 at 15:55
  • @Billy thanks for taking the time. Can you elaborate a bit more, how you think skins would help here? – Frable Oct 22 '14 at 16:45
  • The Player size and the window to zoom together and stay in sync is what you were asking, Is that correct ? if you press play on thre top video in the link and zoom the window in and out you will see what I mean.....Or have I just totally mis-understood the problem...... – Billy Oct 22 '14 at 16:49
  • The main question is if and how to "Reset zoom to 100% and disable it all together". Sync zoom would be an alternative solution. However, quite sure by now that with the current version it cannot be implemented. The $f().getClip().css("width") variable does not scale with zoom, which is essential to my calculations. It returns the dimensions of the area actually showing video pixels. Thus one will never be able to read out the scaled width/height and calculate the offset correctly. – Frable Oct 22 '14 at 17:13

0 Answers0