All geek questions in one place

How can I show only a section of a movie clip with CSS or JavaScript?

I want to show only part of the video clip for this video. Let me explain what I mean with the examples:

  • I have a widescreen video (852x480), but I want to show it as a fullscreen video (640x480) using CSS or JavaScript to simulate cropping. The video file does not change; The script just hides the pixels on the sides.
  • I have a non-standard video, which is a customizable set of two 640 x 480 videos on the sides, so it has a size of 1280 x 480. Without editing the video, I would like to imitate the simultaneous playback of two videos on one page, but this will be from this single source video. I would like to make two 640x480 video elements, and one focuses on the part on the left and the other focuses on the part on the right of the original video source 1280.

I assume that to create a starting point for the video, properties such as top and left , and then setting properties such as bottom and right or height and width to determine how wide and high the video will be displayed from the starting point.

I would really like to use only a CSS solution. I doubt it exists. I am fine with javascript / jquery. I have an idea based on the solution in this answer , but this is a bit like the hacked side of things. Basically, I could make the div the size of what I want the video, relative to the position of it and set the overflow to be hidden. Then I would put the video element in the div and absolutely position so that the parts that I want to display are visible in the div, but the other parts are overflowing and hidden. It makes sense not to use javascript, but I would prefer to use real properties if they exist and not add HTML.

Here are some images to show what I want to achieve, but I don’t know a single solution without a hack. The white part will be the size of the video frame and what is shown to the user. The gray part is that which is hidden.

The video frame has 640 x 480, starting from the upper left corner. The source is 852 x 480. enter image description here The video frame is 640 x 480, starting from the upper right corner. The source is 852 x 480. enter image description here The video frame is 640 x 480, starting at the top and 106 pixels to the left. The source is 852 x 480. enter image description here A 320 x 240 video frame, starting at 140 pixels on the top and 212 pixels on the left. The source is 852 x 480. enter image description here

+5
source share
2 answers

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 part of the video does not include controls, you will have to create your own controls and design them in accordance with the selected part. I did this using 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 quite well, but it seems that at least FF and Chrome will download the video once for each item, even if they name the same source file ? This means that during setup, when one page uses the same source video in two separate video elements, this source video will be downloaded twice. Obviously, two temporary files will be a waste. This may be the reason for rejecting this decision and come up with something else.

+1
source

You can use the CSS clip-path property to display the video section.

You will need to define the built-in svg clipPath element, add a path element with coordinates, give clipPath id and use them in your CSS for the video clip ( clip-path: url(#id) ).

Fiddle

HTML:

 <iframe id="clip-1" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe> <iframe id="clip-2" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe> <iframe id="clip-3" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe> <iframe id="clip-4" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe> <svg> <defs> <!-- Co-ordinates for the first image in your question --> <clipPath id="one"> <path d="M0,0 L640,0 L640,480 L0,480z" /> </clipPath> <!-- Co-ordinates for the second image in your question --> <clipPath id="two"> <path d="M212,0 L852,0 L852,480 L212,480z" /> </clipPath> <!-- Co-ordinates for the third image in your question --> <clipPath id="three"> <path d="M106,0 746,0 746,480 106,480z" /> </clipPath> <!-- Co-ordinates for the fourth image in your question --> <clipPath id="four"> <path d="M212,140 532,140 532,380 212,380z" /> </clipPath> </defs> </svg>

CSS

 #clip-1 { position: absolute; -webkit-clip-path: url(#one); clip-path: url(#one); } #clip-2 { position: absolute; top: 480px; -webkit-clip-path: url(#two); clip-path: url(#two); } #clip-3 { position: absolute; top: 960px; -webkit-clip-path: url(#three); clip-path: url(#three); } #clip-4 { position: absolute; top: 1440px; -webkit-clip-path: url(#four); clip-path: url(#four); } body { margin: 0 auto; }
+3
source

Source: https://habr.com/ru/post/1208076/

More articles:


All Articles