如何插入自适应的视频

一般插入托管视频的时候,都是用iframe或者embed标签,基本上已经定义好了长宽、缩放比率,比较简单。

但是,当需要通过原始链接插入视频的时候,自适应就比较麻烦。找到了一段最简单的代码,用起来是这样的:

<div id="player-overlay" style="position: relative;max-width:854px;height:0;margin:0 auto;padding-bottom:56.25%; ">
<video controls preload="none" poster="poster.png" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<source src="video.mp4" />
</video> 
</div>

其中需要注意的地方:

一个是max-width:854px这个值,因为我放的是小码率视频,最宽也就是854px(对应高度480px,比率16:9),如果你的视频是1280px×720px或者更宽,就写实际宽度。

另一个是padding-bottom:56.25%,56.25%这个数是16:9的倒数,也就是9/16。如果你的视频长宽比不是16:9,那就把这个数改成视频长宽比的倒数。

原始代码如下:

/* The CSS */.videoWrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 Aspect Ratio */     height: 0;
     width: 100%; /* You can set this width to whatever suits your needs */     margin: 0 auto;
}

.videoWrapper video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


/* The HTML */<div class="videoWrapper">
     <video controls>
       <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
     <source src="movie.flv" type="video/flv">
     Your broswerdoes not support the video tag
     </video>
</div>

这段代码来自 https://www.outlier.com/blog/responsive-video-size-css

Leave a Reply

Your email address will not be published. Required fields are marked *