Index: polymer_1.0.4/bower_components/google-castable-video/demo/index.html |
diff --git a/polymer_1.0.4/bower_components/google-castable-video/demo/index.html b/polymer_1.0.4/bower_components/google-castable-video/demo/index.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b51ea067c543f607020c681db31237b73bf5bcd8 |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/google-castable-video/demo/index.html |
@@ -0,0 +1,69 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> |
+ <title>google-castable-video Demo</title> |
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
+ <link rel="import" href="../google-castable-video.html"> |
+ |
+</head> |
+<body> |
+ |
+ <p>An example of using <code><google-castable-video></code>:</p> |
+ |
+ <video is="google-castable-video" width="500"> |
+ <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4" type="video/mp4"> |
+ <source src="https://bennugd-vlc.googlecode.com/files/big_buck_bunny_480p.webm" type="video/webm"></source> |
+ </video> |
+ |
+ <div id="controls"> |
+ <button id="play">PLAY</button> |
+ <button id="pause">PAUSE</button> |
+ <button id="cast">START CASTING</button> |
+ <input id="progress" type="range" min="0" max="100" value="0"> |
+ </div> |
+ |
+ <script> |
+ var vid = document.querySelector("video"); |
+ var playButton = document.querySelector("#play"); |
+ var pauseButton = document.querySelector("#pause"); |
+ var castButton = document.querySelector("#cast"); |
+ var progressSlider = document.querySelector("#progress"); |
+ |
+ playButton.addEventListener("click", function(){ |
+ vid.play(); |
+ }); |
+ |
+ pauseButton.addEventListener("click", function(){ |
+ vid.pause(); |
+ }); |
+ |
+ castButton.addEventListener("click", function(){ |
+ vid.launchSessionManager(); |
+ }); |
+ |
+ progressSlider.addEventListener("mouseup", function(){ |
+ var duration = vid.duration; |
+ var newPosition = ( duration / 100 ) * this.value; |
+ vid.currentTime = newPosition; |
+ }); |
+ |
+ //IMPORTANT use this to get the currentTime even when casting |
+ vid.addEventListener("google-castable-video-timeupdate",function(e){ |
+ var duration = vid.duration; |
+ var currentTime = e.detail.currentTime; |
+ progressSlider.value = currentTime * ( 100 / duration ); |
+ }); |
+ |
+ //listen for casting event to change icon |
+ vid.addEventListener("google-castable-video-casting",function(e){ |
+ if (e.detail.casting) { |
+ castButton.innerHTML = "STOP CASTING"; |
+ } else { |
+ castButton.innerHTML = "START CASTING"; |
+ } |
+ }); |
+ </script> |
+ |
+</body> |
+</html> |