| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html i18n-values="dir:textdirection;"> | 2 <html i18n-values="dir:textdirection;"> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <title>Media Player</title> | 5 <title>Media Player</title> |
| 6 <style type="text/css"> | 6 <style type="text/css"> |
| 7 .audio.progress { | 7 .audio.progress { |
| 8 -webkit-appearance: slider-horizontal; | 8 -webkit-appearance: slider-horizontal; |
| 9 position: absolute; | 9 position: absolute; |
| 10 left: 93px; | 10 left: 93px; |
| 11 right:90px; | 11 right:120px; |
| 12 bottom:-2px; | 12 bottom:-2px; |
| 13 height: 30px; | 13 height: 30px; |
| 14 } | 14 } |
| 15 | 15 |
| 16 body { | 16 body { |
| 17 overflow:hidden; | 17 overflow:hidden; |
| 18 background:black; | 18 background:black; |
| 19 } | 19 } |
| 20 | 20 |
| 21 .video.progress { | 21 .video.progress { |
| 22 -webkit-appearance: slider-horizontal; | 22 -webkit-appearance: slider-horizontal; |
| 23 position: absolute; | 23 position: absolute; |
| 24 left: 93px; | 24 left: 93px; |
| 25 right:90px; | 25 right:120px; |
| 26 bottom:-2px; | 26 bottom:-2px; |
| 27 height: 30px; | 27 height: 30px; |
| 28 } | 28 } |
| 29 | 29 |
| 30 .videocontrols { | 30 .videocontrols { |
| 31 bottom: 0; | 31 bottom: 0; |
| 32 left: 0; | 32 left: 0; |
| 33 z-index:999; | 33 z-index:999; |
| 34 height: 30px; | 34 height: 30px; |
| 35 right: 0; | 35 right: 0; |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 93 background-position: 8px 8px; | 93 background-position: 8px 8px; |
| 94 height: 30px; | 94 height: 30px; |
| 95 } | 95 } |
| 96 | 96 |
| 97 .audio.volume { | 97 .audio.volume { |
| 98 position: absolute; | 98 position: absolute; |
| 99 bottom: 30px; | 99 bottom: 30px; |
| 100 height: 80px; | 100 height: 80px; |
| 101 width: 30px; | 101 width: 30px; |
| 102 right: 30px; | 102 right: 30px; |
| 103 z-index: 99999; |
| 103 background: black; | 104 background: black; |
| 104 background: -webkit-gradient(linear, | 105 background: -webkit-gradient(linear, |
| 105 left top, | 106 left top, |
| 106 left bottom, | 107 left bottom, |
| 107 from(#323232), | 108 from(#323232), |
| 108 to(#070707)); | 109 to(#070707)); |
| 109 } | 110 } |
| 110 | 111 |
| 111 .video.volume { | 112 .video.volume { |
| 112 position: absolute; | 113 position: absolute; |
| 113 bottom: 30px; | 114 bottom: 30px; |
| 114 height: 80px; | 115 height: 80px; |
| 115 width: 30px; | 116 width: 30px; |
| 116 right: 30px; | 117 right: 30px; |
| 118 z-index: 99999; |
| 117 background: black; | 119 background: black; |
| 118 background: -webkit-gradient(linear, | 120 background: -webkit-gradient(linear, |
| 119 left top, | 121 left top, |
| 120 left bottom, | 122 left bottom, |
| 121 from(#323232), | 123 from(#323232), |
| 122 to(#070707)); | 124 to(#070707)); |
| 123 } | 125 } |
| 124 | 126 |
| 127 .audio.fullscreen { |
| 128 position:absolute; |
| 129 right: 60px; |
| 130 cursor: pointer; |
| 131 bottom:0; |
| 132 z-index: 9999; |
| 133 width: 30px; |
| 134 background: url('../../app/theme/mediaplayer_full_screen.png'); |
| 135 background-repeat: no-repeat; |
| 136 background-position: 4px 4px; |
| 137 height: 30px; |
| 138 } |
| 139 |
| 140 .video.fullscreen { |
| 141 position:absolute; |
| 142 right: 60px; |
| 143 cursor: pointer; |
| 144 bottom:0; |
| 145 z-index: 9999; |
| 146 width: 30px; |
| 147 background: url('../../app/theme/mediaplayer_full_screen.png'); |
| 148 background-repeat: no-repeat; |
| 149 background-position: 4px 4px; |
| 150 height: 30px; |
| 151 } |
| 152 |
| 125 .volumeslider { | 153 .volumeslider { |
| 126 -webkit-appearance: slider-vertical; | 154 -webkit-appearance: slider-vertical; |
| 127 position: absolute; | 155 position: absolute; |
| 128 left: 0; | 156 left: 0; |
| 129 right:0; | 157 right:0; |
| 130 bottom:0; | 158 bottom:0; |
| 131 top: 0; | 159 top: 0; |
| 132 } | 160 } |
| 133 | 161 |
| 134 .video.playbutton { | 162 .video.playbutton { |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 184 | 212 |
| 185 .playbackvideoelement { | 213 .playbackvideoelement { |
| 186 width:100%; | 214 width:100%; |
| 187 height:100%; | 215 height:100%; |
| 188 position: absolute; | 216 position: absolute; |
| 189 left:0; | 217 left:0; |
| 190 top:0; | 218 top:0; |
| 191 } | 219 } |
| 192 | 220 |
| 193 .duration { | 221 .duration { |
| 194 right: 58px; | 222 right: 88px; |
| 195 color: white; | 223 color: white; |
| 196 position: absolute; | 224 position: absolute; |
| 197 top: 7px; | 225 top: 7px; |
| 198 font-size: .6em; | 226 font-size: .6em; |
| 199 } | 227 } |
| 200 | 228 |
| 201 .playbackaudioelement { | 229 .playbackaudioelement { |
| 202 width:100%; | 230 width:100%; |
| 203 height:100%; | 231 height:100%; |
| 204 position: absolute; | 232 position: absolute; |
| (...skipping 255 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 460 slider.className = controlsclass + ' progress'; | 488 slider.className = controlsclass + ' progress'; |
| 461 slider.onchange = userChangedProgress; | 489 slider.onchange = userChangedProgress; |
| 462 element.appendChild(slider); | 490 element.appendChild(slider); |
| 463 | 491 |
| 464 var soundbutton = document.createElement('div'); | 492 var soundbutton = document.createElement('div'); |
| 465 soundbutton.id = 'soundbutton'; | 493 soundbutton.id = 'soundbutton'; |
| 466 soundbutton.className = controlsclass + ' soundbutton'; | 494 soundbutton.className = controlsclass + ' soundbutton'; |
| 467 soundbutton.onclick = toggleVolumeVisible; | 495 soundbutton.onclick = toggleVolumeVisible; |
| 468 element.appendChild(soundbutton); | 496 element.appendChild(soundbutton); |
| 469 | 497 |
| 498 var fullscreen = document.createElement('div'); |
| 499 fullscreen.id = 'fullscreen'; |
| 500 fullscreen.className = controlsclass + ' fullscreen'; |
| 501 fullscreen.onclick = toggleFullscreen; |
| 502 element.appendChild(fullscreen); |
| 503 |
| 470 var volume = document.createElement('div'); | 504 var volume = document.createElement('div'); |
| 471 volume.id = 'volume'; | 505 volume.id = 'volume'; |
| 472 volume.className = controlsclass + ' volume'; | 506 volume.className = controlsclass + ' volume'; |
| 473 volume.style.display = 'none'; | 507 volume.style.display = 'none'; |
| 474 var volumeslider = document.createElement('input'); | 508 var volumeslider = document.createElement('input'); |
| 475 volumeslider.type = 'range'; | 509 volumeslider.type = 'range'; |
| 476 volumeslider.id = 'volumeslider'; | 510 volumeslider.id = 'volumeslider'; |
| 477 volumeslider.className = 'volumeslider'; | 511 volumeslider.className = 'volumeslider'; |
| 478 volumeslider.onchange = volumeChange; | 512 volumeslider.onchange = volumeChange; |
| 479 volume.appendChild(volumeslider); | 513 volume.appendChild(volumeslider); |
| (...skipping 22 matching lines...) Expand all Loading... |
| 502 } else { | 536 } else { |
| 503 setupMediaEvents(audioPlaybackElement); | 537 setupMediaEvents(audioPlaybackElement); |
| 504 audioPlaybackElement.src = uri; | 538 audioPlaybackElement.src = uri; |
| 505 audioPlaybackElement.currentTime = 0; | 539 audioPlaybackElement.currentTime = 0; |
| 506 audioPlaybackElement.load(); | 540 audioPlaybackElement.load(); |
| 507 audioPlaybackElement.play(); | 541 audioPlaybackElement.play(); |
| 508 } | 542 } |
| 509 }; | 543 }; |
| 510 | 544 |
| 511 function toggleFullscreen() { | 545 function toggleFullscreen() { |
| 512 | 546 chrome.send('toggleFullscreen', ['']); |
| 513 }; | 547 }; |
| 514 | 548 |
| 515 function onMetadataAvail() { | 549 function onMetadataAvail() { |
| 516 var element = getMediaElement(); | 550 var element = getMediaElement(); |
| 517 var duration = element.duration; | 551 var duration = element.duration; |
| 518 if (duration) { | 552 if (duration) { |
| 519 var durString = '' + Math.floor((duration / 60)) + ':' + (Math.floor(duratio
n) % 60); | 553 var durString = '' + Math.floor((duration / 60)) + ':' + (Math.floor(duratio
n) % 60); |
| 520 var durDiv = $('duration'); | 554 var durDiv = $('duration'); |
| 521 durDiv.textContent = durString; | 555 durDiv.textContent = durString; |
| 522 } | 556 } |
| (...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 609 alert('file unknown'); | 643 alert('file unknown'); |
| 610 } | 644 } |
| 611 }; | 645 }; |
| 612 | 646 |
| 613 </script> | 647 </script> |
| 614 <body onload='load();' onselectstart='return false'> | 648 <body onload='load();' onselectstart='return false'> |
| 615 <div id='playercontrols' class='playercontrols'> | 649 <div id='playercontrols' class='playercontrols'> |
| 616 </div> | 650 </div> |
| 617 </body> | 651 </body> |
| 618 </html> | 652 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1034002:
adding fullscreen support to the mediaplayer (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/