如何只显示带有CSS或JavaScript的视频帧的一部分？ [英] How can I show only a section of a video frame with CSS or JavaScript?

问题描述

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

1. 我有一个宽屏幕视频（852 x 480），但我想把它显示为全屏视频（640 x 480），使用CSS或JavaScript模仿裁剪。视频文件不会改变;脚本只是隐藏了两侧的像素。


2. 我有一个非标准大小的视频，它是两个640 x 480视频并排的自定义组合，所以它是1280总尺寸x 480。无需编辑视频，我想模仿在页面上同时播放两个视频，但它将来自此单一来源视频。我想制作两个640 x 480的视频元素，一个侧重于左侧的部分，另一个侧重于1280原始视频源右侧的部分。

我想设置像 top 和 left 这样的属性来指定起点视频，然后设置属性，如底部和右或高度和 width 指定视频从起点开始显示的宽度和高度。

我会非常喜欢只有CSS的解决方案。我怀疑是否存在。我对javascript / jquery没问题。我有一个基于完成的。

 <！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;宽度：640px;身高：480px; overflow：hidden;}。clippedvid {position：absolute;顶部：0; left：-106px;} / *这是来自video.js的css。我不得不做出这些改变。* / .vjs-default-skin .vjs-control-bar {width：75％; left：12.5％;}< / style> < / head>< body>< div class =clipvid> < video class =clippedvid video-js vjs-default-skinwidth =852pxheight =480px控制autoplay data-setup ={}> < source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4> < / video>< / div>< video class =video-js vjs-default-skinwidth =852pxheight =480pxcontrols data-setup ={}> < source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4>< / video>< / body>< / html>  

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

I want to show only part of the video frame for a given video. Let me explain what I mean with examples:

1. I have a wide screen video (852 x 480) but I want to display it as a full screen video (640 x 480) by using CSS or JavaScript to imitate cropping it. The video file doesn't change; the script just hides the pixels at the sides.
2. I have a non-standard sized video that is a custom mix of two 640 x 480 video side-by-side, so it is 1280 x 480 in total size. Without having to edit the video, I would like to imitate having two videos play simultaneously on a page, but it will be from this single source video. I would like to make two video elements 640 x 480 and one focuses on the part to the left and the other focuses to the part on the right on the 1280 original video source.

I imagine setting properties like top and left to designate the start point for the video, then setting properties like bottom and right or height and width to designate how wide and high the video will will be shown from the start point.

I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on the solution in this answer, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.

---

Here's some images to show what I want to accomplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.

Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480. Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480. Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480. Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.

解决方案

I decided to go with the "hack" solution that I mentioned in the question. I was able to design it exactly as described, but if your selected portion of the video does not include the controls then you will have to make custom controls and design them to fit in the the selected portion. I did this with 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 works well enough, but 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? This means in a setup where one page uses the same source video in two video separate elements, that source video will be downloaded twice. Clearly two temp files would be a waste of bandwidth. This might be cause to scrap this solution and come up with something else.

这篇关于如何只显示带有CSS或JavaScript的视频帧的一部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！