3

我创建了一个包含 9 个图像的简单引导网格。现在单击特定图像时，它应该全屏播放视频。

我尝试过的方法

<div class="col-sm-4">   
 <a href="Videos/v6.mp4"  ><img src="images/img1.jpg"   class="img-responsive" style="width:100%" alt="Image"></a>
</div>

但上述方法的缺点是，在某些浏览器中单击图像时会尝试下载完整的视频文件。

当尝试使用标签和全屏视频 API（在 MDN 上）嵌入视频时<video>，单击视频海报时，它会以特定的缩略图大小播放视频，并且不会全屏显示。

我试图实现上述方法是

HTML

     <video controls src="Videos/abc.mp4" poster="/images/abc.png" width="640" height="360" id="myvideo">

JS

  var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
  if (videoElement.mozRequestFullScreen) {
    videoElement.mozRequestFullScreen();
  } else {
    videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
} else {
  if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else {
    document.webkitCancelFullScreen();
  }
}}document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
  toggleFullScreen();
}}, false);

CSS

  <style type="text/css">
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

上面的方法也行不通。

请帮助我，谢谢

4

1 回答 1

1

在 HTML5 中尝试：

<video poster="placeholder.jpg" id="backgroundvid"> 
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'> 
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> 
<p>Fallback content to cover incompatibility issues</p> </video>

要使视频全屏使用以下 CSS：

video#backgroundvid {  
   position: fixed; right: 0; 
   bottom: 0; 
   min-width: 100%; 
   min-height: 100%; 
   width: auto; 
   height: auto; 
   z-index: -100; 
   background: url(polina.jpg) no-repeat; background-size: cover;  
}
于 2016-08-21T14:18:45.043 回答