响应式 Html5 视频分辨率 [英] Responsive Html5 Video Resolution

问题描述

我正在使用响应式网页设计编写一个简单的网页，因此使用 CSS3 媒体查询来根据屏幕分辨率提供不同的样式表.为简单起见，假设有一个 iphone 版本和一个桌面版本.我正在使用 html5 视频标签来提供视频，我想在使用桌面访问网站时提供 720p 视频，在使用 iphone 访问时提供较小的 320p 视频.我错了还是仅使用 html/css 就没有简单的方法?我是否必须使用 javascript 来动态更改视频 src 属性?如果是这样，最佳做法是什么?提前致谢.

I'm writing a simple web page using responsive web design, so CSS3 media queries to serve different stylesheets based on screen resolution. To keep it simple, let's say there is an iphone versione and a desktop version. I'm using the html5 video tag to serve videos, and i would like to serve a 720p video when the site is accessed with a desktop and a smaller, 320p video when accessed with an iphone. Am i wrong or there is no easy way to do it just with html/css? Do i have to use javascript to dynamically change the video src attribute? If so, what are the best practices? Thanks in advance.

推荐答案

您可以将 media 属性添加到各种 source 元素，允许您为以下内容提供不同的视频匹配媒体查询设置的设备(如上面 DBUK 所链接的).

You can add the media attribute to the various source elements allowing you to serve up different videos for devices which match media query settings (as linked to by DBUK above).

例如:

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

更新–24.07.2012这很可能会从规范中删除.

这篇关于响应式 Html5 视频分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！