video-js.html

<link rel="import" href="../polymer/polymer.html">
<script src="../videojs/dist/video-js/video.js"></script>

<!--
Element providing a wrapper around the Video.js HTML5 video library

##### Example

    <video-js controls preload="auto" width="640" height="264" poster="oceans-clip.png">
     <source src="oceans-clip.mp4" type='video/mp4' />
     <source src="oceans-clip.webm" type='video/webm' />
     <source src="oceans-clip.ogv" type='video/ogg' />
    </video-js>
 
@element video-js
@blurb Element providing a wrapper around the Video.js HTML5 video library
@status alpha
@homepage http://github.com/addyosmani/video-js
-->
<polymer-element name="video-js" attributes="width height preload poster">

    <template>
        <link rel="stylesheet" href="../videojs/dist/video-js/video-js.css">
        <video class="video-js vjs-default-skin" id="myvideo" controls width="{{width}}" height="{{height}}" preload="{{preload}}" poster="{{poster}}">
            <content></content>
        </video>
    </template>

  <script>

    Polymer({

      /**
       * The `width` attribute specifies the width of a video player, in pixels
       * 
       * @attribute width
       * @type integer
       */
      width: 640,

      /**
       * The `height` attribute specifies the height of a video player, in pixels
       * 
       * @attribute height
       * @type integer
       */
      height: 264,

      /**
       * The `preload` attribute specifies if/how the video should be loaded
       * 
       * @attribute preload
       * @type string
       */
      preload: 'auto',

      /**
       * The `poster` attribute specifies an image shown while downloading
       * 
       * @attribute poster
       * @type string
       */
      poster: '',

      ready: function() {
        videojs(this.$.myvideo);
      }
    });

  </script>

</polymer-element>