最初的 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. flask请求流程

  2. maven(12)，排除冲突JAR包

     JAR包冲突 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  3. C#实现字符串相似度算法

    字符串的相似性比较应用场合很多,像拼写纠错.文本去重.上下文相似性等. 评价字符串相似度最常见的办法就是: 把一个字符串通过插入.删除或替换这样的编辑操作,变成另外一个字符串,所需要的最少编辑次数,这 ...

  4. VSTO 开发

    http://www.cnblogs.com/yangecnu/category/499866.html http://www.cnblogs.com/brooks-dotnet/category/2 ...

  5. 【MyBatis】MyBatis实现CRUD操作

    1.实现基本CRUD功能 使用MyBatis对数据完整的操作,也就是CRUD功能的实现.根据之前的内容,要想实现CRUD,只需要进行映射文件的配置. 范例:修改EmpMapper.xml文件,实现CR ...

  6. 乘风破浪：LeetCode真题_004_Median of Two Sorted Arrays

    乘风破浪:LeetCode真题_004_Median of Two Sorted Arrays 一.前言 说到算法,最难的就是一些需要通过分析得到一些递推公式或者有用的结论,进而用来解决问题的方法了. ...

  7. host 'xx' is not allowed to connect to this MySql server

    update mysql.user set host = '%' where user = 'root'; FLUSH PRIVILEGES; select * from mysql.user;

  8. 设置python的默认编码方式为utf-8

    在python的Lib\site-packages文件夹下新建一个sitecustomize.py,然后通过sys.getdefaultencoding()获取当前的默认编码 内容为:

  9. 关于使用 CALayer 中 mask 的一些技巧

    CALayer 拥有 mask 属性,Apple 的官方解释如下: An optional layer whose alpha channel is used to mask the layer’s ...

  10. 【[HNOI2008]GT考试】

    我又来复习\(kmp\)了 其实这道题主要是一个矩阵乘法,但是\(kmp\)在其中也有着非常重要的作用 我们可以这样定义状态\(dp[i][j]\)表示文本串进行到了\(i\)位置,同时文本串在最后和 ...