如何只显示带有CSS或JavaScript的视频帧的一部分？

Question

如何只显示带有CSS或JavaScript的视频帧的一部分？

我想只显示给定视频的部分视频帧.让我用例子解释一下我的意思:

我有一个宽屏幕视频(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没问题.我有一个基于这个答案的解决方案的想法,但这似乎有点在黑客方面.基本上,我可以将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.

Answer 1

193*_*286 2

我决定采用我在问题中提到的“黑客”解决方案。我能够完全按照描述进行设计，但是如果您选择的视频部分不包含控件，那么您将必须制作自定义控件并设计它们以适合所选部分。我用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>

Run Code Online (Sandbox Code Playgroud)

它工作得很好，但似乎至少 FF 和 Chrome 会为每个元素下载一次视频，即使它们调用完全相同的源文件？这意味着在一个页面在两个视频单独元素中使用相同源视频的设置中，该源视频将被下载两次。显然两个临时文件会浪费带宽。这可能会导致废弃该解决方案并提出其他解决方案。

归档时间：	10 年，11 月前
查看次数：	3342 次
最近记录：	10 年，9 月前