6月9号=》111页-115页

5.1  使用audio和video元素

      HTML5新增了<audio>和<video>两个元素,开发者可以通过这两个元素在HTML页面上

      播放音频、视频。无须在浏览器上安装任何插件,只要浏览器本身支持HTML5规范即可。

      不仅如此,开发者使用这两个元素来播放音频、是视频也十分简单。

      音频播放代码示范:

        <h2>音频播放</h2>

        <audio src="demo.ogg" controls>

        您的浏览器不支持audio元素

        </audio>

      视频播放代码示范:

        <<h2>视频播放</h2>

        <videosrc="movie.webm" controls>

        您的浏览器不支持video元素

        </video>

      以上代码可以看到,HTML新增的两个元素实现音频和视频的播放是如此的简单。在元素的开始

      标签和结束标签之间放置文本内容,当浏览器不支持以上标签时,就会显示这段文本。

      <audio>、<video>支持的属性

        src:指定播放音频、视频的URL地址。

        autoplay:该属性值要么是autoplay,要么完全省略属性值。如果指定了该属性,那么当音频、视频

              装载完后会自动播放。

        controls:该属性值要么是controls,要么完全省略属性值。如果指定了该属性,播放音频、视频时则显示播放控制条。

        loop:该属性值要么是loop,要么完全省略属性值。如果指定了该属性,音频、视频播放完成后则会再次重复播放。

        perload:该属性指定是否预加载音频、视频。

        该属性支持如下几个属性值:

          auto:预加载音频、视频。

          metadata:只预加载音频、视频的元数据,如媒体字节数、第一帧、播放列表、持续时间等。

          none:不执行预加载。

          如果指定了autoplay属性,该属性将会被忽略。

        poster:该属性只对<video>元素有效,该属性指定一张图片的URL。当视频下载完成、开始播放之前,该元素将会

             显示该属性所指定的图片。

        width:该属性只对<video>元素有效,指定视频播放器的宽度。

        height:该属性只对<video>元素有效,指定视频播放器的高度。

      各浏览器的音频支持情况:

        音频格式        Internet Explorer9    Firefox    Opera    Chrome

        WAV格式(*.wav)    支持            支持     支持       支持

        MP3          支持            不支持    不支持     支持

        OGG Vobis       不支持             支持     支持       支持

      各浏览器的视频支持情况:

        视频格式        Internet Explorer9    Firefox    Opera    Chrome

        OGG Theora        不支持         支持       支持       支持

        H.264            支持          不支持      不支持     支持

        VP8               支持           支持      
支持       支持

      考虑到各浏览器对音频、视频的支持互不相同,开发者可能希望为<audio>元素、<video>元素指定多个媒体源,

      此时就可以借助于<source>子元素来实现。

      <source>元素可指定如下两个重要属性。

        src:该属性指定音频、视频文件的URL。

        type:该属性指定音频、视频文件的类型,该属性的值既可以是简单的MIME字符串,例如audio/ogg、

            audio/mpeg等,也可以使MIME字符串并带codecs属性,codecs属性用于指定该视频文件的

            编码格式。例如,可以指定为audio/ogg;codecs="vobis"。通常来说,指定codecs属性可以

            提供更多信息,更便于浏览器判断是否能播放此种类型的音频、视频。

      代码示范:

        <h2>音频播放</h2>

        <audio controls>

          <!--让浏览器依次选择适合自己播放的音频文件-->

          <source src="demo.ogg" type="audio/ogg" media="aaa"/>

          <source src="demo.mp3" type="audio/mpeg"/>

          <source src="demo.wav" type="audio/x-wav"/>

        </audio>

      对于上面代码来说,只要该浏览器支持<audio>元素,无论该浏览器是支持OGG Vobis压缩格式,

      还是支持MP3压缩格式,或是只支持WAV格式,该浏览器总可以找到适合自己的音频文件,因此

      总可以正常播放,视频播放也是如此。

          

      

        

时间: 2024-08-10 02:09:32

6月9号=》111页-115页的相关文章

5月29号=》第41页-第45页

2.4 HTML5头部和元信息 <script>:该元素用于包含JavaScript脚本. <style>:该元素用于定义内部CSS样式. <link>:该元素用于链接外部CSS样式等资源. <title>:该元素用于定义文档标题. <base>:该元素用于指定该页面中所有链接的基准链接. 该元素属性如下: href:指定所有链接的基准链接. target:指定超链接默认在哪个窗口打开=>(_blank._parent._self._top

5月27号=》第30页-第35页

2.18 框架相关元素 HTML5删除了<frameset>.<frame>.<noframes>这三个标签 保留了<iframe>元素 2.2 HTML5新增的通用属性 2.2.1 contenEditable:该属性为true时可在页面直接对该标签进行编辑    用户编辑完后,内容会直接显示在该页面中(一旦  刷新页面就会重新加载,编辑的内容会丢失),开发  者可以通过该元素的innerHTML属性来获取编辑后    的内容   该属性具有"可

5月28号=》第35页-第40页

2.3.2 语义相关元素 <mark>:用于显示HTML页面中需要重点"关注"的内容,浏览器 通常会用黄色显示该标签内的内容. <time>:用来显示被标注内容是日期.时间或者日期时间.   使用该标签要指定datetime属性,格式为"yyyy-MM-ddTHH:mm"   如果<time>标签的内容直接符合以上格式,则可以不用指定datetime属性. <details>:该元素用于显示一段详细信息或某个主题的细节

6月11号=》121页-125页

6.1 样式单概述 W3C已经给出了两种样式单语言的推荐标准,一种是级联样式单CSS(Cascading Style Sheets), 另一种是可扩展样式单语言XSL(eXtensible Stylesheet Language). 6.1.1 CSS CSS主要提供如下两个功能: 1:对页面的字体.颜色控制更加细腻,让页面内容更富表现力,CSS的表现效果远远超出 传统HTML页面的color.bgcolor等属性的表现力. 2:通过CSS控制整站风格,CSS样式单可以同时控制整个站点所有页面的

8月19号=》436页-440页

16.1 Web Storage 在传统的HTML时代,浏览器的主要功能只是负责展现HTML页面,即使增加了JavaScript脚本,依然只是为动态地修改HTML页面服务.因此 浏览器只是一个“界面呈现工作”. 如果开发者需要在客户端存储少量数据,早起只能通过Cookie来实现,但Cookie存在如下3点不足: Cookie的大小被限制为4KB. Cookie会包含在每个HTTP请求中向服务器发送,这样势必导致多次发送重复数据. Cookie在网络传输时并未加密(除非整个应用都使用SSL),因此

8月11号=》386页-390页

14.9 navigator和地理位置 window对象有一个navigator属性,该属性对应于Navigator对象,该对象代表浏览该页面所使用的浏览器.该对象在不同 的平台上的信息并不完全相同,但总包含如下几个常用的属性. appName:返回该浏览器的内核名称. appVersion:返回该浏览器当前的版本号. platform:返回当前浏览器所在的操作系统. 14.9.1 HTML5新增的geolocation属性 HTML5为navigator新增了一个geolocation属性,这

8月5号=》346页-350页

13.11 创建对象 JavaScript中创建对象可以不用使用任何累.JavaScript中创建对象大概有3中方式. 13.11.1 使用new关键字调用构造器创建对象 代码示范: //定义一个函数,同时也定义了一个Person类 function Person(name,age) { this.name = name; this.age = age; } //使用new关键字创建Person实例 var p1 = new Person("张三",18); //输出该对象的属性值 a

7月29号=》301页-305页

13.5 运算符 JavaScript提供了相当丰富的运算符,运算符也是JavaScript语言的基础. 通过运算符,可以将变量连接成语句,语句是JavaScript代码中的执行单位. 下面依次介绍JavaScript中的运算符. 13.5.1 赋值运算符 =:即var num = 1; 13.5.2 算术运算符 +:即1+2 =3; -:即2-1 = 1; *:即2*2 =4; /:即4/2 = 2; %:即3%2=1; 13.5.3 位运算符 &:按位与. |:按位或. ~:按位非. ^:按

7月23号=》261页-265页

12.1 CSS3提供的变形支持 CSS3提供的变形支持可以对HTML组件进行常见的几何变换,包括旋转.缩放.倾斜.位移 4中变换,也可以使用变换矩阵进行变形. CSS3为变形支持提供了如下两个属性值. transform:该属性用于设置变形.该属性支持一个或多个变形函数.CSS3提供了如下变形函数. translate(tx [,ty]):该函数设置HTML组件横向上移动tx距离,纵向上移动ty距离.其中ty参数 可以省略,如果省略ty参数,则ty默认为0,表明纵向上没有位移. transla