How can I show only a section of a video frame with CSS or JavaScript?

后端未结

关注

 2  1810

不思量自难忘°

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

I have a wide screen video (852 x 480) but I want to d

相关标签:

2条回答

遥遥无期

2021-01-18 20:11

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.

0 讨论(0)

囚心锁ツ

2021-01-18 20:13

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

You'll need to define inline svg clipPath element, add a path element with co-ordinates, give the clipPaths the ids and use them in your CSS to clip the video(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;
}

0 讨论(0)