diff options
| author | Nicolas Roard <nicolasroard@google.com> | 2012-02-21 15:38:06 -0800 |
|---|---|---|
| committer | Nicolas Roard <nicolasroard@google.com> | 2012-02-21 16:00:42 -0800 |
| commit | 4d49c7f04ab34686de0da5aba6f7427a151c471d (patch) | |
| tree | bc9509f1cbf86a27062088236c1b49bc2e401a6b /core/res/assets/webkit | |
| parent | 16e19ce9190791d5e45d71f2810529691e1f44be (diff) | |
| download | frameworks_base-4d49c7f04ab34686de0da5aba6f7427a151c471d.zip frameworks_base-4d49c7f04ab34686de0da5aba6f7427a151c471d.tar.gz frameworks_base-4d49c7f04ab34686de0da5aba6f7427a151c471d.tar.bz2 | |
Simplify Youtube <embed> management
When we encounter youtube <embed> objects, we replace them on the fly
with an element that will redirect to the youtube application.
Currently, this element is a canvas, that we add to the document wrapped
into a Frame. This cause some problems when we switch to have canvas
elements on their own individual layer (which drastically improves
performances). Note that we do support correctly composited layers
into frameset/iframes on normal websites, the problems we see here
are due to us creating the frame on the fly, messing with webkit's
compositing logic.
This CL rewrite the HTML code we insert to not use canvas and instead
use normal html elements positioned via CSS. This work around the
composited canvas issue as well as simplifying the code.
Change-Id: Ie6043f9445e8bc191b229db9f9ff5de192d8b5db
Diffstat (limited to 'core/res/assets/webkit')
| -rw-r--r-- | core/res/assets/webkit/youtube.html | 99 |
1 files changed, 32 insertions, 67 deletions
diff --git a/core/res/assets/webkit/youtube.html b/core/res/assets/webkit/youtube.html index d808bcf..8e103c1 100644 --- a/core/res/assets/webkit/youtube.html +++ b/core/res/assets/webkit/youtube.html @@ -13,94 +13,59 @@ height: 100%; padding: 0%; z-index: 10; + background-size: 100%; + background: no-repeat; + background-position: center; + } + #play { + position: absolute; + left: 50%; + top: 50%; + } + #logo { + position: absolute; + bottom: 0; + right: 0; } </style> </head> <body id="body"> <script type="text/javascript"> - // Nominal original size. If the embed is smaller than this, the play and logo - // images get scaled appropriately. These are actually 3/4 of the sizes suggested - // by youtube, so the images don't get too tiny. - defHeight = 258; - defWidth = 318; - function setup() { var width = document.body.clientWidth; var height = document.body.clientHeight; - var canvas = document.getElementById("canvas"); - // Resize the canvas to the right size - canvas.width = width; - canvas.height = height; - var ctx = canvas.getContext('2d'); + var mainElement = document.getElementById("main"); + var playElement = document.getElementById("play"); var loadcount = 0; - function doload() { - if (++loadcount == 3) { - // All images are loaded, so display them. - // (Note that the images are loaded from javascript, so might load - // after document.onload fires) - - playWidth = play.width; - playHeight = play.height; - logoWidth = logo.width; - logoHeight = logo.height; - var ratio = 1; - // If the page is smaller than it 'should' be in either dimension - // we scale the background, play button and logo according to the - // dimension that has been shrunk the most. - if (width / height > defWidth / defHeight && height < defHeight) { - ratio = height / defHeight; - // Stretch the background in this dimension only. - backgroundHeight = background.height / ratio; - ctx.drawImage(background, 0, 0, background.width, background.height, - 0, (height - backgroundHeight) / 2, width, backgroundHeight); - } else if (width / height < defWidth / defHeight && width < defWidth) { - ratio = width / defWidth; - backgroundWidth = background.width / ratio; - ctx.drawImage(background, 0, 0, background.width, background.height, - (width - backgroundWidth) / 2, 0, backgroundWidth, height); - } else { - // In this case stretch the background in both dimensions to fill the space. - ctx.drawImage(background, 0, 0, width, height); - } - playWidth *= ratio; - playHeight *= ratio; - logoWidth *= ratio; - logoHeight *= ratio; - playLeft = (width - playWidth) / 2; - playTop = (height - playHeight) / 2; - ctx.drawImage(play, playLeft, playTop, playWidth, playHeight); - ctx.globalAlpha = 0.7 - ctx.drawImage(logo, width - logoWidth, height - logoHeight, logoWidth, logoHeight); - // To make it slightly easier to hit, the click target is twice the width/height of the unscaled play button - targetLeft = width / 2 - play.width; - targetRight = width / 2 + play.width; - targetTop = height / 2 - play.height; - targetBottom = height / 2 + play.height; + var POSTER = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; - canvas.addEventListener("click", function(e) { - var posx = e.clientX-canvas.offsetLeft; - var posy = e.clientY-canvas.offsetTop; - if (posx >= targetLeft && posx <= targetRight && - posy >= targetTop && posy <= targetBottom) { - top.location.href = "vnd.youtube:VIDEO_ID"; - } - }, false); + function doload() { + if (++loadcount == 2) { + // Resize the element to the right size + mainElement.width = width; + mainElement.height = height; + mainElement.style.backgroundImage = "url('" + POSTER + "')"; + // Center the play button + playElement.style.marginTop = "-" + play.height/2 + "px"; + playElement.style.marginLeft = "-" + play.width/2 + "px"; + playElement.addEventListener("click", function(e) { + top.location.href = "vnd.youtube:VIDEO_ID"; + }, false); } } var background = new Image(); background.onload = doload; - background.src = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; + background.src = POSTER; play = new Image(); play.onload = doload; play.src = "play.png"; - logo = new Image(); - logo.onload = doload; - logo.src = "youtube.png"; } + window.onload = setup; </script> <div id="main"> - <canvas id="canvas"></canvas> + <img src="play.png" id="play"></img> + <img src="youtube.png" id="logo"></img> </div> </body> </html> |