如何使用 CSS 或 JavaScript 仅显示视频帧的一部分？答案

【问题标题】：How can I show only a section of a video frame with CSS or JavaScript?如何使用 CSS 或 JavaScript 仅显示视频帧的一部分？
【发布时间】：2014-12-01 20:14:35
【问题描述】：

我只想显示给定视频的部分视频帧。让我用例子来解释我的意思：

我有一个宽屏视频 (852 x 480)，但我想通过使用 CSS 或 JavaScript 模拟裁剪将其显示为全屏视频 (640 x 480)。视频文件不变；该脚本只是隐藏了两侧的像素。
我有一个非标准尺寸的视频，它是两个 640 x 480 视频并排的自定义混合，因此总尺寸为 1280 x 480。无需编辑视频，我想模拟在一个页面上同时播放两个视频，但它将来自这个单一来源的视频。我想制作两个 640 x 480 的视频元素，一个聚焦于 1280 原始视频源的左侧部分，另一个聚焦于右侧部分。

我想设置像top和left这样的属性来指定视频的起点，然后设置像bottom和right或height和width这样的属性来指定视频的宽度和高度视频将从起点开始播放。

我非常喜欢纯 CSS 的解决方案。然而，我怀疑是否存在。我对 javascript/jquery 没问题。我有一个基于the solution in this answer 的想法，但这似乎有点不合时宜。基本上，我可以制作一个我想要视频大小的 div，相对定位它并将溢出设置为隐藏。然后我会将视频元素放在 div 内并绝对定位，以便在 div 中看到我想要显示的部分，但其他部分溢出并被隐藏。这确实有不需要 javascript 的好处，但如果它们存在并且没有添加 HTML，我更愿意使用真实属性。

这里有一些图片来展示我想要完成的事情，但不知道任何非黑客解决方案。白色部分是视频帧的大小以及向用户显示的内容。灰色部分是隐藏的。

视频帧从左上角开始为 640 x 480。源是 852 x 480。视频帧从右上角开始为 640 x 480。源是 852 x 480。视频帧为 640 x 480，从顶部开始，从左侧开始 106 像素。源是 852 x 480。视频帧为 320 x 240，从顶部 140 像素和左侧 212 像素开始。源是 852 x 480。

【问题讨论】：

只需使用 4 个元素（上、左、下、右）+ CSS 创建一个遮罩。

标签： javascript css html5-video

【解决方案1】：

您可以使用 CSS 的 clip-path 属性来显示视频的部分。

您需要定义内联 svg clipPath 元素，添加带有坐标的 path 元素，将 clipPaths 指定为 ids 并在 CSS 中使用它们来剪辑视频(clip-path: url(#id))。

Fiddle

HTML：

<iframe id="clip-1" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-2" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-3" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-4" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>

<svg>
    <defs>
        <!-- Co-ordinates for the first image in your question -->
        <clipPath id="one">
            <path d="M0,0 L640,0 L640,480 L0,480z" />
        </clipPath>
        <!-- Co-ordinates for the second image in your question -->
        <clipPath id="two">
            <path d="M212,0 L852,0 L852,480 L212,480z" />
        </clipPath>
        <!-- Co-ordinates for the third image in your question -->
        <clipPath id="three">
            <path d="M106,0 746,0 746,480 106,480z" />
        </clipPath>
        <!-- Co-ordinates for the fourth image in your question -->
        <clipPath id="four">
            <path d="M212,140 532,140 532,380 212,380z" />
        </clipPath>
    </defs>
</svg>

CSS：

#clip-1 {
    position: absolute;
    -webkit-clip-path: url(#one);
    clip-path: url(#one);
}
#clip-2 {
    position: absolute;
    top: 480px;
    -webkit-clip-path: url(#two);
    clip-path: url(#two);
}
#clip-3 {
    position: absolute;
    top: 960px;
    -webkit-clip-path: url(#three);
    clip-path: url(#three);
}
#clip-4 {
    position: absolute;
    top: 1440px;
    -webkit-clip-path: url(#four);
    clip-path: url(#four);
}
body {
    margin: 0 auto;
}

【讨论】：

clip 已被弃用。 clip-path 应改为使用。请参阅here、here 和 here
似乎也不适用于视频标签（至少我现在遇到了麻烦）。此外，来自上述评论链接中 CSS 技巧的 cmets 中有人报告说它在 iOS 8 safari 上运行不佳。
感谢您为此付出的努力，但我希望对视频标签执行此操作，而不是 YouTube 的 iframe 嵌入代码。此外，这个解决方案比我在问题中引用的 hack 复杂得多。不是一个很好的选择。

【解决方案2】：

我决定采用我在问题中提到的“hack”解决方案。我能够完全按照描述进行设计，但是如果您选择的视频部分不包含控件，那么您将必须制作自定义控件并设计它们以适合所选部分。我用video.js 做到了这一点。

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>

  <link href="http://vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.10/video.js"></script>
  
<style type="text/css">
.clipvid {  
	position: relative;
	width: 640px;
	height: 480px;
	overflow: hidden;
}
.clippedvid {
	position: absolute;
	top: 0;
	left: -106px;
}
/* This is from the css for video.js. I had to make these changes.*/ 
.vjs-default-skin .vjs-control-bar {
  width: 75%;
  left: 12.5%;
}
  
  
</style>
  
</head>

<body>
<div class="clipvid">
    <video class="clippedvid video-js vjs-default-skin" width="852px" height="480px" controls autoplay data-setup="{}">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</div>


<video class="video-js vjs-default-skin" width="852px" height="480px" controls data-setup="{}">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

</body>
</html>

它工作得很好，但是it seems that at least FF and Chrome will download the video once for each element, even though they call the exact same source file?这意味着在一个页面在两个视频单独元素中使用相同源视频的设置中，该源视频将被下载两次。显然，两个临时文件会浪费带宽。这可能是放弃此解决方案并提出其他解决方案的原因。

【讨论】：