HTML5 Video Rails - ruby-on-rails

Question

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)
<video controls poster="video/video.jpg" width="854" height="480">
<source src="m/video.ogv" type="video/ogg">
<source src="video/trailer_test.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="m/player.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><!--><param name="movie" value="m/player.swf"><!--<![endif]-->
<img src="m/video.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. Download it instead.</p>
</object>
</video>
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!

Answer 1

> 1- What is a source file .ogg?? Can't I just use a mp4 file and insert it in my video tags.
Yes you can just use mp4. See the Rails API on video_tag. It works with mp4. http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag
> 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.
An easy way to do this is to use the paperclip gem for handling the video uploads. Very easy to grab the url you need to play it.
> 3- I have the following file but doesn't show anything any file any reason why? > 4- Do i need to code it
If you are using mp4 in HTML5, you just need the video_tag, you don't need any of this