最初的 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. JS计算距当前时间的时间差

    /** * JS获取距当前时间差 * * @param int time JS毫秒时间戳 * */ function get_time_diff(time) { var diff = ''; var ...

  2. C#中Equals和= =(等于号)的比较(转)

    一.           值类型的比较 对于值类型来说  两者比较的都是”内容”是否相同,即 值 是否一样,很显然此时两者是划等号的. 例: int i = 9; int j = 9; Console ...

  3. java笔记-修改javadoc为中文API信息

    Eclipse 默认的Javadoc API是英文版的,修改成中文版本的API步骤为: --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/ ...

  4. 在datagridview中添加button按钮

    .Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此but ...

  5. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  6. 使用CALayer制作View的辉光效果

    使用CALayer制作View的辉光效果 实现以下的辉光效果: 思路是这样子的: 1. 创建好需要实现辉光效果的View 2. 对这个View进行截图 3. 将这个截图重新添加进View中 4. 对这 ...

  7. Quick BI助力云上大数据分析---深圳云栖大会

    在3月29日深圳云栖大会的数据分析与可视化专场中,阿里云产品专家陌停对大数据智能分析产品 Quick BI 进行了深入的剖析.大会现场的精彩分享也赢得观众们的一直认可和热烈的反响. 大数据分析之路的挑 ...

  8. LeetCode算法题 菜鸟总结

    近期准备抽出一点时间,刷一些题防止手生,毕竟codemonkey,吃饭的手艺不能忘. ······································· 基本的题目都是基于java语言解答 ...

  9. JavaScript事件的委派与事件的绑定

    事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...

  10. BZOJ 1491 社交网络 Floyd 最短路的数目

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1491 题目大意: 见链接 思路: 直接用floyd算法求最短路,同时更新最短路的数目即 ...