| 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>
|
| +
|
|
|