1.video(视频)
带控制器的视频播放器:
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
代码如下:
<video width="320" height="240" controls > <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/ogg"> <p>你的流浪起不支持video标签</p> </video>
属性说明:
属性 | 值 | 信息 |
autoplay | autoplay | 如果出现该属性,视屏在就绪后马上播放 |
control | control | 显示视频中的简单元素。控制元素的外观由浏览器决定,与此属性无关。 显示元素,譬如:播放、暂停、调节音量、跳播(若内容支持)、全屏显示,以及可能用到的字幕开关。 |
loop | loop | 视频播放完后让浏览器自动从头播放 |
muted | muted | 视频默认静音 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 |
preload | preload | 如果出现该属性,则视频在页面加载时自动加载,并预备播放。如果出现”autoplay“,则忽略该属性 |
src | URL | 要播放视屏的URL |
width | pixels(px) | 设置播放视频的宽度 |
height | pixels(px) | 设置播放视频的高度 |
视频格式:
格式 | MIME-type |
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
使用DOM进行控制:
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
(还没学到,以后补充)
2.audio(音频)
带控制器的音频播放器
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。
代码如下:
<audio width="320" height="240" control> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg "> <p>你的浏览器不支持audio元素</p> </audio>
属性说明:
(- -!跟视频属性一样,除了少了没有poster属性)
音频格式:
格式 | MIME-type |
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
(就这样了...)
时间: 2024-10-08 13:18:11