title: HTML5 Video Rails
body: <p>I am confuse on how to use html5 video tags with rails. I few questions</p>
  
  <p>1- What is a source file .ogg?? Can't I just use a mp4 file and insert it in my video tags.</p>
  
  <p>2- If i want to show video/image to all member it should be in public? Then how do i access public, and how do i access video in a different folder such as assert/video if i create it.</p>
  
  <p>3- I have the following file but doesn't show anything any file any reason why?</p>
  
  <p>4- Do i need to code it to encode the video first? or just insert it into a file. Is ogg a good encoder or zencoder better?</p>
  
  <p>Javascript (application.js)</p>
  
  <pre><code>function init() {
              if( !document.createElement('video').canPlayType ) return;
              var videos = document.querySelectorAll( 'div.video' ),
                  videosLength = videos.length;
              for( var i=0; i &lt; videosLength; i++ ) {
                  var root = videos[i];
                      video = root.querySelector( 'video' ),
                      play = document.createElement( 'button' ),
                      mute = document.createElement( 'button' );
                  video.controls = false;
                  // Initial class name
                  play.className = 'video-button video-play';
                  play.innerHTML = play.title = 'Play';
                  play.onclick = function() {
                      if( video.paused ) {
                          video.play();
                          // Additional class names for container and button while playing
                          root.className += ' video-on';
                          play.className += ' video-play-on';
                          play.innerHTML = play.title = 'Pause';
                      } else {
                          video.pause();
                          // Remove additional class names for container and button in paused state
                          root.className = root.className.replace( ' video-on', '' );
                          play.className = play.className.replace( ' video-play-on', '' );
                          play.innerHTML = play.title = 'Play';
                      }
                  }
                  // Initial class name
                  mute.className = 'video-button video-mute';
                  mute.innerHTML = mute.title = 'Mute';
                  mute.onclick = function() {
                      if( video.muted ) {
                          video.muted = false;
                          // Remove additional class name in unmuted state
                          mute.className = mute.className.replace( ' video-mute-on', '' );
                          mute.innerHTML = mute.title = 'Mute';
                      } else {
                          video.muted = true;
                          // Additional class name for button in muted state
                          mute.className += ' video-mute-on';
                          mute.innerHTML = mute.title = 'Unmute';
                      }
                  }
                  root.appendChild( play );
                  root.appendChild( mute );
              }
          }
          window.onload = init;
  </code></pre>
  
  <p>HTML (index.html.erb)</p>
  
  <pre><code>&lt;video controls poster="video/video.jpg" width="854" height="480"&gt;
      &lt;source src="m/video.ogv" type="video/ogg"&gt;
      &lt;source src="video/trailer_test.mp4" type="video/mp4"&gt;
      &lt;object type="application/x-shockwave-flash" data="m/player.swf" width="854" height="504"&gt;
      &lt;param name="allowfullscreen" value="true"&gt;
      &lt;param name="allowscriptaccess" value="always"&gt;
      &lt;param name="flashvars" value="file=video.mp4"&gt;
      &lt;!--[if IE]&gt;&lt;!--&gt;&lt;param name="movie" value="m/player.swf"&gt;&lt;!--&lt;![endif]--&gt;
      &lt;img src="m/video.jpg" width="854" height="480" alt="Video"&gt;
      &lt;p&gt;Your browser can&amp;rsquo;t play HTML5 video. &lt;a href="m/video.ogv"&gt; Download it&lt;/a&gt; instead.&lt;/p&gt;
      &lt;/object&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS (application.css)</p>
  
  <pre><code>body {
              margin:0;
              padding:50px;
              background:#444;
              }
  
          /* Video */
          .video {
              position:relative;
              overflow:hidden;
              float:left;
              background:#000;
              color:#fff;
              }
              .video video {
                  display:block;
                  opacity:.4;
                  -webkit-transition:all .2s linear;
                  -moz-transition:all .2s linear;
                  -o-transition:all .2s linear;
                  transition:all .2s linear;
                  }
              .video:hover video {
                  opacity:.6;
                  }
          .video-on video,
          .video-on:hover video {
              opacity:1;
              }
  
          /* Button */
          .video-button {
              position:absolute;
              z-index:1;
              border:none;
              background:#CCC;
              text-indent:-9999px;
              cursor:pointer;
              -webkit-transform:scale(1.0);
              -moz-transform:scale(1.0);
              -o-transform:scale(1.0);
              transform:scale(1.0);
              -webkit-transition:all .2s linear;
              -moz-transition:all .2s linear;
              -o-transition:all .2s linear;
              transition:all .2s linear;
              }
          .video-button:hover {
              -webkit-transform:scale(1.1);
              -moz-transform:scale(1.1);
              -o-transform:scale(1.1);
              transform:scale(1.1);
              }
          .video-button:after {
              position:absolute;
              background:url(i/buttons.png) no-repeat;
              content:'';
              }
  
          /* Play */
          .video-play {
              bottom:30px;
              left:30px;
              -webkit-box-shadow:0 0 50px #FFF,
                  inset 5px 5px 20px #444,
                  inset 0 -20px 40px #000;
              -moz-box-shadow:0 0 50px #FFF,
                  inset 5px 5px 20px #444,
                  inset 0 -20px 40px #000;
              box-shadow:0 0 50px #FFF,
                  inset 5px 5px 20px #444,
                  inset 0 -20px 40px #000;
              width:50px;
              height:50px;
              -webkit-border-radius:25px;
              -moz-border-radius:25px;
              border-radius:25px;
              }
          .video-play:after {
              top:15px;
              left:16px;
              width:21px;
              height:21px;
              background-position:0 0;
              }
          .video-play-on:after {
              background-position:-23px 0;
              }
  
          /* Mute */
          .video-mute {
              bottom:35px;
              left:100px;
              -webkit-box-shadow:0 0 30px #FFF,
                  inset 4px 4px 15px #444,
                  inset 0 -15px 35px #000;
              -moz-box-shadow:0 0 30px #FFF,
                  inset 4px 4px 15px #444,
                  inset 0 -15px 35px #000;
              box-shadow:0 0 30px #FFF,
                  inset 4px 4px 15px #444,
                  inset 0 -15px 35px #000;
              width:38px;
              height:38px;
              -webkit-border-radius:19px;
              -moz-border-radius:19px;
              border-radius:19px;
              }
          .video-mute:after {
              top:13px;
              left:11px;
              width:17px;
              height:14px;
              background-position:0 -21px;
              }
          .video-mute-on:after {
              background-position:-18px -21px;
              }
  </code></pre>
  
  <p>Any help is appreciated!</p>