Как я могу показать только часть видеокадра с CSS или JavaScript?

Я хочу показать только часть видеокадра для данного видео. Позвольте мне объяснить, что я имею в виду с примерами:

У меня широкоэкранное видео (852 x 480), но я хочу отобразить его как полноэкранное видео (640 x 480) с помощью CSS или JavaScript для имитации обрезки. Видео файл не меняется; скрипт просто скрывает пиксели по бокам.У меня есть видео нестандартного размера, представляющее собой собственное сочетание двух видео 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 х 480, начиная с верхнего левого угла. Источник 852 х 480. Кадр видео 640 х 480, начиная с правого верхнего угла. Источник 852 х 480. Видеокадр имеет размер 640 x 480, начиная сверху и 106 пикселей слева. Источник 852 х 480. Видеокадр имеет размер 320 x 240, начиная с 140 пикселей сверху и 212 пикселей слева. Источник 852 х 480.

Ответы на вопрос(2)

Ваш ответ на вопрос