最初的 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. Redis(二)：c#连接Redis

    1.nuget StackExchange.Redis 2.建立RedisHelper类: public class RedisHelper { /// <summary> /// 连接字 ...

  2. 使用JSONP彻底解决Ajax跨域访问Cookie Session的方案

    最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Co ...

  3. socket概念 套接字

    理解socket soxket因为TCP是面向流的,你发的信息如果很多很快,TCP这样就会形成黏包 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socke ...

  4. Asp.Net MVC Identity 2.2.1 使用技巧（七）

    创建角色管理相关视图 1.添加视图 打开RolesAdminController.cs   将鼠标移动到public ActionResult Index()上  右键>添加视图   系统会弹出 ...

  5. Foj 2299 Prefix（AC自动机、DP）

    Foj 2299 Prefix 题意 给定串s.正整数n,问有多少长度为n的字符串t满足:s[0...i]是t的子串,s[0...i+1]不是. 题解 求有多少长度为n的字符串t满足:s[0...i] ...

  6. scala集合与数据结构

    1.数据结构特点 Scala同时支持可变集合和不可变集合,不可变集合从不可变,可以安全的并发访问. 两个主要的包: 不可变集合:scala.collection.immutable 可变集合: sca ...

  7. python内置模块（三）

    hashlib模块 通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制的字符串表示). Python2中使用hashlib: import hashlib m = hashlib ...

  8. Codeforces Round #443 (Div. 2) 【A、B、C、D】

    Codeforces Round #443 (Div. 2) codeforces 879 A. Borya's Diagnosis[水题] #include<cstdio> #inclu ...

  9. SOJ 1017 Power of Cryptography 库函数精度

    Background Current work in cryptography involves (among other things) large prime numbers and comput ...

  10. Jquery mobile 自定义 返回按钮 data-rel="back"

    data-rel="back" 第一个页面 主页面 studentmaster.html  通过下面js脚本跳转到详情页面 window.location.href="s ...