Index: polymer_1.0.4/bower_components/google-youtube/demo/demo.elements.html |
diff --git a/polymer_1.0.4/bower_components/google-youtube/demo/demo.elements.html b/polymer_1.0.4/bower_components/google-youtube/demo/demo.elements.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0820c239effd30d69118be66407d2c6c90ba41d4 |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/google-youtube/demo/demo.elements.html |
@@ -0,0 +1,108 @@ |
+<link rel="import" href="../../polymer/polymer.html"> |
+<link rel="import" href="../google-youtube.html"> |
+ |
+ |
+<dom-module id="demo-element"> |
+ <template id="page-template"> |
+ <style> |
+ div { |
+ margin-bottom: 1em; |
+ } |
+ </style> |
+ <h1><code><google-youtube></code> Demo</h1> |
+ <h3>Full API Demo</h3> |
+ <google-youtube id="googleYouTube" |
+ playsupported="{{playSupported}}" |
+ video-id="mN7IAaRdi_k" |
+ state="{{state}}" |
+ currenttime="{{currentTime}}" |
+ currenttimeformatted="{{currentTimeFormatted}}" |
+ duration="{{duration}}" |
+ durationformatted="{{durationFormatted}}" |
+ fractionloaded="{{fractionLoaded}}" |
+ on-google-youtube-state-change="handleStateChange" |
+ on-google-youtube-error="handleYouTubeError"> |
+ </google-youtube> |
+ |
+ <div> |
+ <p>Playback Progress: <span>{{currentTimeFormatted}}</span> / <span>{{durationFormatted}}</span> <progress max="1" value="{{computeProgress(currentTime, duration)}}"></progress></p> |
+ </div> |
+ |
+ <div> |
+ <button id="play-video" |
+ disabled="{{computePlayDisabled(state, playSupported)}}" |
+ on-click="handlePlayVideo" |
+ >Play</button> |
+ <button id="pause-video" |
+ disabled="{{computePauseDisabled(state)}}" |
+ on-click="handlePauseVideo" |
+ >Pause</button> |
+ </div> |
+ |
+ <div> |
+ <label for="videoId">Video ID:</label> |
+ <input id="videoId" value="M7lc1UVf-VE"> |
+ <button id="cue-video" on-click="handleCueVideo">Cue</button> |
+ </div> |
+ |
+ <div> |
+ <p>Player Events:</p> |
+ <ol> |
+ <template is="dom-repeat" items="{{events}}"> |
+ <li>State change: <span>{{item.data}}</span></li> |
+ </template> |
+ </ol> |
+ </div> |
+ |
+ <h3>Custom Thumbnail Demo</h3> |
+ <google-youtube video-id="yRbOSdAe_JU" |
+ width="853px" |
+ height="480px" |
+ thumbnail="//www.polymer-project.org/images/logos/p-logo.svg"> |
+ </google-youtube> |
+ </template> |
+</dom-module> |
+<script> |
+ Polymer({ |
+ is: 'demo-element', |
+ properties: { |
+ playSupported: String, |
+ state: String, |
+ currentTime: Number, |
+ currentTimeFormatted: String, |
+ duration: Number, |
+ durationFormatted: String, |
+ fractionLoaded: Number, |
+ events: { |
+ type: Array, |
+ value: [] |
+ } |
+ }, |
+ computeProgress: function(currentTime, duration) { |
+ return currentTime / duration; |
+ }, |
+ computePlayDisabled: function(state, playSupported) { |
+ return state == 1 || state == 3 || !playSupported; |
+ }, |
+ computePauseDisabled: function(state) { |
+ return state != 1 && state != 3; |
+ }, |
+ handleStateChange: function(ev) { |
+ this.events.push({data: ev.detail.data}); |
+ }, |
+ handleYouTubeError: function(ev) { |
+ console.error('YouTube playback error', ev.detail); |
+ }, |
+ handlePlayVideo: function(ev) { |
+ this.$.googleYouTube.play(); |
+ }, |
+ handlePauseVideo: function(ev) { |
+ this.$.googleYouTube.pause(); |
+ }, |
+ handleCueVideo: function(ev) { |
+ this.$.googleYouTube.videoid = this.$.videoId.value; |
+ } |
+ }); |
+ |
+</script> |
+ |