响应视频

时间:2016-09-22 15:53:25

标签: html css video

我正在努力让我的视频成为响应式视频。视频位于图像(电视屏幕)的顶部,无论浏览器有多大,它都必须保持在同一个位置。

我如何制作视频以便

a)回应 b)固定在当前所处的位置。

视频有高度和宽度,所以我猜它很难做到。

任何建议都将受到赞赏。

由于

里斯

{{1}}

1 个答案:

答案 0 :(得分:2)

制作视频响应与制作图片响应非常相似。 主要是,您有两个解决方案:

1)在%s中使用width和max-width属性而不是像素。 视频将在他的范围内缩放(当然也在窗口限制范围内)。 这是一个非常常见的解决方案 - 但是,我建议您不要使用它。 在与视频不同的宽高比的屏幕上,这可能看起来不太好。 http://www.w3schools.com/css/css_rwd_videos.asp

2)更好的解决方案是使用媒体属性作为源,根据不同的屏幕尺寸(媒体查询)调整不同的视频。

<video>
<source src="video-widescreens" media="screen and (min-width:800px)">
<source src="video-widescreens" media="screen and (min-width:800px)">
<source src="video-smallscreens.mp4" media="screen and (max-width:799px)">
<source src="video-smallscreens" media="screen and (max-width:799px)">
</video>