使用javascript的視頻效果

Question

任何人都可以告訴我如何獲得this頁面上顯示的視頻效果？它具有100％的寬度，響應並使用Javascript。

如果您有任何代碼示例會很棒。

Answer 1

該網站使用的是HTML5視頻標籤。這裏的來源，谷歌瀏覽器渲染：

<video loop="loop" poster="/video/features/main.jpg" style="width: 1263px; height: 711px; top: -186.5px; left: 0px;"> 
    <source src="/video/features/main.webm" type="video/webm"> 
    <source src="/video/features/main.mp4" type="video/mp4"> 
</video> 

的標籤，顯然只有在HTML5兼容的瀏覽器可用，可以播放視頻文件。這就是它在這種情況下所做的。

第一個來源是主視頻來源，MP4是第一個視頻格式不支持的情況下的後備。循環屬性允許您爲播放視頻設置一個循環，並且該海報是要顯示的圖像，直到用戶播放或尋找。

看一看MDN page。

Answer 2

BKWLD dev here。我們使用外部div設置爲overflow: hidden，然後使用基於16：9縱橫比的JavaScript來縮放+定位視頻標籤。

這裏是什麼在每個窗口resize事件的一個簡單的例子：
（https://gist.github.com/danro/5408291）

// Depends on jQuery 
// Assumes outerDiv and videoTag are jQuery objects 

var width = outerDiv.width(); 
var height = outerDiv.height(); 
var aspectW = 16; 
var aspectH = 9; 
var scaleX = width/aspectW; 
var scaleY = height/aspectH; 
var scale = Math.max(scaleX, scaleY); 
var w = Math.ceil(aspectW * scale); 
var h = Math.ceil(aspectH * scale); 
var x = 0; 
var y = 0; 
if (w > width) x = -(w-width)*0.5; 
if (h > height) y = -(h-height)*0.5; 

videoTag.css({ 
    width: w, 
    height: h, 
    top: y, 
    left: x 
});