最初的 HTML5规范呼吁所有浏览器内置支持使用 Ogg格式① 直接播放视频或音频（无需插件）。但是由于 HTML5工作组的内部争议，曾经作为基线标准的支持 Ogg（包括 Theoravideo 和 Vorbis audio）的主张在最近更新的 HTML5规范中被放弃。因此目前的情况是，一些浏览器支持某一套视频和音频文件格式，而另一些浏览器则支持其他格式。例如Safari只允许在 <video> 和 <audio> 元素中使用 MP4/H.264/AAC媒体文件，而 Firefox 和Opera则只支持 Ogg和 WebM。谢天谢地，有一种方法能在一个标签内支持多种媒体格式。但是这种方法并不能免除我们为一个媒体文件创建多种版本。我们都期望这个问题在将来某个适当的时刻会自行解决，此时我们手握多种格式的媒体文件，则可以这样编写视频标签：
<video width="640" height="480" controls autoplay preload="auto" loopposter="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
如果浏览器支持 Ogg格式，则使用第一个文件；否则它会继续往下解析下一个 <source>标签。

针对老版本浏览器的备用方案：

照这种方式使用 <source> 标签，我们就能根据需要提供一系列备用方案。例如在提供了MP4 和 Ogg 格式之后，如果我们还想给 IE8 及更低版本提供一个优雅的备用方案，则可以追加一个 Flash。更进一步，如果用户的浏览器没有任何合适的媒体播放技术，我们还可以为其提供媒体文件的下载链接：
<video width="640" height="480" controls autoplay preload="auto" loop poster=
"myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash"data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />
<param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.jpg&amp; file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"title="No video playback capabilities, please download the video below" />

</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>

响应式视频：

对于 HTML5式嵌入视频，修正方法很简单。只需删除视频标签中的 height和 width 属性（如删除 width="" height="" ），然后在 CSS中追加如下代码：

video { max-width: 100%; height: auto; }

这种方法对本页面中的视频文件很有用，但它不能解决使用 iframe 嵌入的视频的响应问题，有很多方法可以解决这个问题，但截至目前我见过的最简单的办法是使用一个名为 FitVids的 jQuery小插件。

首先引入 jQuery 库文件。在页面的 <head> 元素中加载该文件。其次，从网站 http://fitvidsjs.com/上下载 FitVids 插件（有关该插件的更多信息请见http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/）。将 FitVids文件存入一个合理的文件夹（假设文件夹名为“js”），然后在 <head> 中引入该文件：

<script src="js/fitvids.js"></script>

最后，只需使用 jQuery指定包含 YouTube视频的特定元素。将视频放入 设有id为 #content 的 div 中：
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
});
</script>
只需这三步。多亏有了 FitVid 插件，现在我们有了一个完全可响应的 YouTube视频。

HTML5 添加视频和音频（响应式视频）的更多相关文章

  1. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  2. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  3. 针对vue中请求数据对象新添加的属性不能响应式的解决方法

    1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...

  4. 《响应式Web设计—HTML5和CSS3实战》 学习记录

    作者:Ben Frain 学习时间   2016/5/12 第一章   设计入门 *视口调试工具 IE:Microsoft Internet Explorer Develop Toolbar Safa ...

  5. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  6. html5教程 《实用技巧》—让你的网站变成响应式的3个简单步骤

    如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单 ...

  7. 16个最佳响应式HTML5框架分享

    HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...

  8. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. jekyll开发静态网站

    一.Ruby环境安装配置 首先下载ruby安装ruby download ,安装完ruby后,再安装rubyGems:运行gem update --system即可. 然后下载DevKit-mingw ...

  2. centos虚拟机网卡配置

    连接模式为NAT

  3. Android实现身份证拍摄框

    http://blog.csdn.net/lhbtm/article/details/55505668 最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了 ...

  4. leetcode Ch3-DFS & Backtracking I

    一.树的遍历 [非递归版] 1. 后序 class Solution { public: vector<int> postorderTraversal(TreeNode *root) { ...

  5. Oracle数据库从入门到精通-分组统计查询

    视频课程:李兴华 Oracle从入门到精通 视频课程学习者:阳光罗诺 视频来源:51CTO学院 整体内容: 统计函数的使用 分组统计查询的实现 对分组的数据过滤 统计函数 在之前我们就学习过一个COU ...

  6. Java BigDecimal初探

    更新时间:2016-03-17 一.引言 <Effactive Java>中有这样的描述:float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为 ...

  7. QT5连接Mysql

    摘要 在Qt 5中已经提供了对MySQL数据库的默认支持,要想使用该数据库,需要先进行数据库的安装, 这里我们介绍下在Windows系统中MySQL数据库的安装和简单使用.   Qt如何利用Mysql ...

  8. 第九次，mp3

  9. Kendo 计算字段

    var Product = kendo.data.Model.define({ fields: { "quantity": { type: "number" } ...

  10. CRF++ 如何制定自己的特征模板

    工具的简单介绍 对该工具的安装及介绍我这里就不再赘述,请参考官方文档或者国内一些翻译后的中文版.也还比较清楚. 我只介绍一下crf++在命名实体识别中的一些用法,这些都建立在你了解crf++的一些最基 ...