diff options
| author | Leon Clarke <leonclarke@google.com> | 2010-03-24 17:30:32 +0000 |
|---|---|---|
| committer | Leon Clarke <leonclarke@google.com> | 2010-03-25 14:19:06 +0000 |
| commit | 6fad943d196b52cf5692bbb4e4ae0e495cffbbae (patch) | |
| tree | f5463d6dad441597df29dfe3662cd09ec587035f /core/res/assets/webkit | |
| parent | bb961a05d70a1d36651da20cd79879e06e72ddb0 (diff) | |
| download | frameworks_base-6fad943d196b52cf5692bbb4e4ae0e495cffbbae.zip frameworks_base-6fad943d196b52cf5692bbb4e4ae0e495cffbbae.tar.gz frameworks_base-6fad943d196b52cf5692bbb4e4ae0e495cffbbae.tar.bz2 | |
http://b/issue?id=2516676
Correctly scale the play button and youtube logo when embedded
youtube videos are displayed at smaller than the suggested size.
Diffstat (limited to 'core/res/assets/webkit')
| -rw-r--r-- | core/res/assets/webkit/youtube.html | 105 |
1 files changed, 74 insertions, 31 deletions
diff --git a/core/res/assets/webkit/youtube.html b/core/res/assets/webkit/youtube.html index 45d9c5e..289f8cf 100644 --- a/core/res/assets/webkit/youtube.html +++ b/core/res/assets/webkit/youtube.html @@ -5,18 +5,6 @@ a:hover { text-decoration: none; } a:link { color: black; } a:visited { color: black; } - #bg { - position: fixed; - margin: 0px; - border: 0px; - padding: 0px; - left: 0px; - top: 0px; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 0; - } #main { position: absolute; left: 0%; @@ -28,26 +16,81 @@ } </style> </head> - <body> - <div id="bg"> - <img src="http://img.youtube.com/vi/VIDEO_ID/0.jpg" - style="width:100%; height:100%"/> - </div> + <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 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) + ctx.drawImage(background, 0, 0, width, height); + 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 play button and logo according to the dimension that + // has been shrunk the most. + if (width / height > defWidth / defHeight && height < defHeight) { + ratio = height / defHeight; + } else if (width / height < defWidth / defHeight && width < defWidth) { + ratio = width / defWidth; + } + 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; + + 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); + } + } + var background = new Image(); + background.onload = doload; + background.src = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; + 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"> - <table height="100%" width="100%"> - <tr> - <td align="center" valign="middle" height="100%"> - <a id="url" href="vnd.youtube:VIDEO_ID" target="_top"> - <img src="play.png" style="border:0px"/> - </a> - </td> - </tr> - <tr> - <td valign="bottom" align="right"> - <img src="youtube.png" style="opacity:.7"/> - </td> - </tr> - </table> + <canvas id="canvas"></canvas> </div> </body> </html> |