Question

任何人都可以告诉我如何在this页面上显示视频效果？它有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 page。

Answer 2

BKWLD dev这里。我们使用外部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
});

使用javascript的视频效果

2 个答案: