我想只显示给定视频的部分视频帧.让我用例子解释一下我的意思：
>我有一个宽屏幕视频(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.