rails html5,HTML5 Video Rails

I am confuse on how to use html5 video tags with rails. I few questions

1- What is a source file .ogg?? Can't I just use a mp4 file and insert it in my video tags.

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.

3- I have the following file but doesn't show anything any file any reason why?

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?

Javascript (application.js)

function init() {

if( !document.createElement('video').canPlayType ) return;

var videos = document.querySelectorAll( 'div.video' ),

videosLength = videos.length;

for( var i=0; i < 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;

HTML (index.html.erb)

Your browser can’t play HTML5 video. Download it instead.

CSS (application.css)

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;

}

Any help is appreciated!