我对如何将 html5 视频标签与 rails 一起使用感到困惑。我几个问题
1-什么是源文件.ogg？？我不能只使用 mp4 文件并将其插入到我的视频标签中。
2- 如果我想向所有成员展示视频/图像，它应该是公开的吗？然后我如何访问公共，以及如果我创建它，我如何访问不同文件夹中的视频，例如断言/视频。
3- 我有以下文件，但没有显示任何文件，为什么？
4-我需要先对其进行编码以对视频进行编码吗？或者只是将其插入文件中。ogg 是一个好的编码器还是 zencoder 更好？
Javascript（应用程序.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（应用程序.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;
}
任何帮助表示赞赏！