在全屏播放HTML5視頻點擊圖片

我創建了一個簡單的自舉網格，其中包含9個圖像。現在點擊一個特定的圖像，它應該全屏播放視頻。在全屏播放HTML5視頻點擊圖片

方法我試過

<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>

但是上述方法的缺點是，在某些瀏覽器onclicking像它會嘗試下載完整的視頻文件。

當試圖使用<video>標記和全屏視頻API（在MDN上）嵌入視頻時，按一下視頻海報，它會播放特定縮略圖大小的視頻並且不會全屏顯示。

方法我試圖實現以上是

HTML

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

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

上述方法也不起作用。

請幫幫我，謝謝

來源

2016-08-21 galbis

不是單擊圖像，爲什麼不在視頻中添加一張海報，然後單擊該海報。該視頻播放...這應該可以幫助你全屏切換視頻，其已在這裏得到解答http://stackoverflow.com/questions/11171781/full-screen-video-toggle-html –

嘗試在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-21 14:18:45 Anokrize

在全屏播放HTML5視頻點擊圖片

回答

相關問題