HTML5 学习笔记（一）——HTML5概要与新增标签 - SeeYouBug(6)_H5之家

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Video 标签</title> </head> <body> <video controls="controls" poster="content/1.jpg"> <source src="content/iceage4.mp4" type="video/mp4"></source> <source src="content/iceage4.webm" type="video/webm"></source> <object type="application/x-shockwave-flash" data="myvideo.swf"> <param value="myvideo.swf" /> <param value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="content/iceage4.webm">下载视频</a> </video> <h2> <button>播放</button> <button>暂停</button> <span></span> </h2> <script type="text/javascript"> var videoIce=document.getElementById("videoIce"); function play() { videoIce.play(); } function pause() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById("msg").innerHTML=videoIce.currentTime; } </script> </body> </html>

运行结果：

练习：

3.3.2、audio音频标签

audio可以实现播放声音，音乐功能。

<audio src=http://baidu/demo/test.mp3 controls >
您的浏览器不支持audio元素
</autio>

audio标签的属性，很多属性都是与video相同的：

autoplay：true|false，如果是 true，则音频在就绪后马上播放。
controls：true|false 如果是true，则向用户显示控件，比如播放按钮。
end：numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。
loopend：numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。
loopstart： numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount： numeric value 定义音频片断播放多少次。默认是 1。
src： url 所播放音频的 url。
start : numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。

source子标签

使用source元素作为多媒体元素的子标签
例:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>
使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。

audio的API与video基本一样，下面是一个自定义调整音量的示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>audio标签</title> </head> <body> <h2>audio标签</h2> <audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"> <marquee><h2>换个浏览器吧，太老了</h2></marquee> </audio> <input type="range" min="0" max="100" onchange="setVolume(this)" /> <script type="text/javascript"> function setVolume(obj){ document.getElementById("mp3").volume=obj.value*0.01; } </script> </body> </html>

运行结果：

音量只在0-1之间。

3.3.3、embed元素