OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-
scale=1.0, user-scalable=yes"> |
| 5 <title>google-castable-video Demo</title> |
| 6 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 7 <link rel="import" href="../google-castable-video.html"> |
| 8 |
| 9 </head> |
| 10 <body> |
| 11 |
| 12 <p>An example of using <code><google-castable-video></code>:</p> |
| 13 |
| 14 <video is="google-castable-video" width="500"> |
| 15 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_b
uck_bunny_1080p.mp4" type="video/mp4"> |
| 16 <source src="https://bennugd-vlc.googlecode.com/files/big_buck_bunny_480p.we
bm" type="video/webm"></source> |
| 17 </video> |
| 18 |
| 19 <div id="controls"> |
| 20 <button id="play">PLAY</button> |
| 21 <button id="pause">PAUSE</button> |
| 22 <button id="cast">START CASTING</button> |
| 23 <input id="progress" type="range" min="0" max="100" value="0"> |
| 24 </div> |
| 25 |
| 26 <script> |
| 27 var vid = document.querySelector("video"); |
| 28 var playButton = document.querySelector("#play"); |
| 29 var pauseButton = document.querySelector("#pause"); |
| 30 var castButton = document.querySelector("#cast"); |
| 31 var progressSlider = document.querySelector("#progress"); |
| 32 |
| 33 playButton.addEventListener("click", function(){ |
| 34 vid.play(); |
| 35 }); |
| 36 |
| 37 pauseButton.addEventListener("click", function(){ |
| 38 vid.pause(); |
| 39 }); |
| 40 |
| 41 castButton.addEventListener("click", function(){ |
| 42 vid.launchSessionManager(); |
| 43 }); |
| 44 |
| 45 progressSlider.addEventListener("mouseup", function(){ |
| 46 var duration = vid.duration; |
| 47 var newPosition = ( duration / 100 ) * this.value; |
| 48 vid.currentTime = newPosition; |
| 49 }); |
| 50 |
| 51 //IMPORTANT use this to get the currentTime even when casting |
| 52 vid.addEventListener("google-castable-video-timeupdate",function(e){ |
| 53 var duration = vid.duration; |
| 54 var currentTime = e.detail.currentTime; |
| 55 progressSlider.value = currentTime * ( 100 / duration ); |
| 56 }); |
| 57 |
| 58 //listen for casting event to change icon |
| 59 vid.addEventListener("google-castable-video-casting",function(e){ |
| 60 if (e.detail.casting) { |
| 61 castButton.innerHTML = "STOP CASTING"; |
| 62 } else { |
| 63 castButton.innerHTML = "START CASTING"; |
| 64 } |
| 65 }); |
| 66 </script> |
| 67 |
| 68 </body> |
| 69 </html> |
OLD | NEW |