javascript - 使用javascript的视频效果

Question

谁能告诉我如何获得此页面上显示的视频效果？它具有 100% 的宽度，响应迅速并使用 Javascript。

如果您有任何代码示例，那就太好了。

Answer 1

该网站正在使用 HTML5 视频标签。这是由 Google Chrome 呈现的源代码：

<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 是备用。loop 属性允许您为正在播放的视频设置循环，并且海报是在用户播放或搜索之前显示的图像。

看看MDN 页面。

Answer 2

BKWLD 开发人员在这里。我们使用外部 div 设置为overflow: hidden，然后使用 JavaScript 缩放 + 定位视频标签，基于 16:9 的纵横比。

这是每个窗口调整大小事件发生的简化示例
：( 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
});