レールでhtml5ビデオタグを使用する方法について混乱しています。いくつか質問があります
1-ソースファイル.oggとは何ですか？mp4ファイルを使用してビデオタグに挿入することはできません。
2-すべてのメンバーにビデオ/画像を表示したい場合は公開する必要がありますか？次に、パブリックにアクセスするにはどうすればよいですか。また、作成した場合、assert/videoなどの別のフォルダーにあるビデオにアクセスするにはどうすればよいですか。
3-次のファイルがありますが、理由を問わずファイルが表示されません。
4-最初にビデオをエンコードするためにコーディングする必要がありますか？または、ファイルに挿入するだけです。oggは優れたエンコーダーまたはzencoderのどちらが優れていますか？
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. <a href="m/video.ogv"> Download it</a> 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;
}
どんな助けでも大歓迎です！