25

HTML 5 でビデオをトリミングしたい。

<video id="glass" width="640" height="360" autoplay>
    <source src="invisible-glass-fill.mp4" type="video/mp4">
</video>

ビデオの解像度は 640x360 ですが、width属性を 200 に設定すると、ビデオのサイズが変更されます (縦横比が保持されます)。HTMLまたはJavascriptを使用してビデオをトリミングする方法(たとえば、左右の両方から220ピクセルを切り取る)は? ビデオ編集ソフトウェアでビデオをトリミングしなくても可能ですか?

4

2 に答える 2

37

CSS とラッパーを使用することをお勧めします。

HTML

<div class="container">
    <video id="glass" width="640" height="360" autoplay>
        <source src="invisible-glass-fill.mp4" type="video/mp4">
    </video>
</div>

CSS

.container{
    width: 200px;
    overflow:hidden;
    display:block;
    height: 360px;
}
#glass{
    margin-left: -220px;
}
于 2013-09-10T10:12:43.300 に答える
1

私は同じニーズに遭遇しました（実際のビデオをトリミングするのではなく、その場でビデオをトリミングしたい）。

私のソリューションは非常にシンプルで、コンテナの高さや幅を絶対値で指定する必要がないように機能するため、レスポンシブです。ここでは簡単にするためにインライン スタイルを使用しましたが、css をクラスなどに簡単に移動できます。

<div style="overflow: hidden;">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" style="margin-top: -10.5%; margin-bottom: -10.5%"></video>
</div>

この例では、パーセンテージで負のマージンを使用しました。パーセンテージを使用すると、コンテナーの幅に基づいて計算されることに注意してください。したがって、動画の高さの 10.5% ではありません。そうしたい場合は、JavaScriptを使用する必要があると思います。vhただし、このアプローチでは、またはvwユニットも使用できます。または、アルバロが提案したことを実行し、コンテナの幅を絶対にサイズを設定したい場合はコンテナpxに設定し、余白を設定するために使用します。

他の例については、このコードペンをチェックしてください!

于 2021-05-03T14:42:18.090 に答える