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

前端之家收集整理的这篇文章主要介绍了如何只显示带有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没问题.我有一个基于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.

最佳答案
您可以使用CSS的clip-path属性显示视频的部分.

您需要定义内联svg clipPath元素,添加带坐标的路径元素,为clipPaths提供id并在CSS中使用它们来剪辑视频(clip-path:url(#id)).

Fiddle

HTML: