Erlo

HTML5 添加视频和音频(响应式视频)

时间:2018-10-11 09:58   阅读:11次   来源:博客园页面报错

最初的 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视频。

下一篇:CSS3实现的几个小loading效果

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-10-23 10:17:38Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部