So Beautiful 旅程——HTML5的多媒体支持

       以前在大家制作网页的时候,通常都需要借助于第三方插件,比如flash;除此之外,开发者也可以使用自主开发的多媒体播放插件,但是HTML5规范的出现改变了这种状况。

 

 以下是本章的内容,本人使用过以后感觉使用性其实一般,在面对现今浏览器版本不一,浏览器对HTML5元素方面支持率的层次不齐,以及格式方面的欠缺,导致HMTL5多媒体支持方面还是需要一段时间的发展区适应。

第五章   HTML5的多媒体支持

一、使用audio和video元素

代码:

预览效果:

 

 

指定controls属性就会生成播放控制条

对于音频格式,目前HTML5推荐OGG Vobis压缩格式,MP3具备的,OGG Vobis都具备而且更加优秀,而且完全免费,而且开放

对于视频格式,目前HTML推荐使用VP8作为视频压缩格式(*.webm)

Chrome对各种音频、视频的支持最好

考虑到各浏览器对音频、视频的支持互不相同,开发者可以指定多个媒体源,这需要借助<source>子元素来实现:

代码:

二、使用JavaScript脚本控制媒体播放

1.HTMLAudioElement与HTMLVideoElement支持的方法

这两个对象有下面这些方法:

play():播放

pause():暂停

load():重新装载

canPlayType(type):可播放type类型(MIME字符串)的音频、视频

代码:

预览效果:

FireFox支持较好(Opera和FireFox仅支持OGG格式音频,不支持MP3)

 

2.HTMLAudioElement与HTMLVideoElement支持的属性

TimeRanges对象,类似于数组,该对象包含多个时间段:

start(index):返回第index+1个时间段的开始时间

end(index):返回第index+1个时间段的结束时间

 

三、事件监听

1.事件

2.监听器

代码:

预览效果:

 

 

注:以上代码摘录于《疯狂HTML5/CSS3/JavaScript讲义》;

       这篇文章主要是对这些章节进行了分类和归纳,如果您需要更加详细的信息,可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书,或登陆登陆:http://www.crazyit.org

 

 

相关推荐
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页