Question

我创建了一个包含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>

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

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

方法我试图实现上面的

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%;
}

上述方法也不起作用。

请帮助我，谢谢

Answer 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;  
}

全屏播放HTML5视频onClick图像

1 个答案: