老雷html/css开发视频教程之媒体元素
一、img
<img id="" class="" src="http://www.w3school.com.cn/i/eg_cute.gif" alt="图片不存在" />
src 图像的 URL
alt 图像的替代文本
二、audio
<audio src="http://www.w3school.com.cn/i/horse.mp3" controls="controls"></audio>
属性列表：
src 要播放的音频的 URL
autoplay 自动播放
controls 显示控件
loop 循环播放
preload 预加载，如果autoplay则失效
三、video
<video width="100%" height="240" controls="controls" src="http://www.w3school.com.cn/i/movie.ogg"></video>
属性列表：
src 要播放的视频的 URL
height 高度
width 宽度
autoplay 自动播放
controls 显示控件
loop 循环播放
preload 预加载，如果autoplay则失效
poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
四、source 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源
<audio controls="controls">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mp3">
</audio>
<video controls="controls">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"></source>
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"></source>
</video>
<source src="horse.ogg" type="audio/ogg">
属性列表：
src 规定媒体文件的 URL
type 规定媒体资源的 MIME 类型
audio/ogg
audio/mp3
audio/mpeg
video/mp4
video/ogg
video/webmQ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>媒体元素</title> </head> <body> <div> <img src="http://www.w3school.com.cn/i/eg_cute.gif" alt="图片不存在" /> </div> <div> <audio src="http://www.w3school.com.cn/i/horse.mp3" controls="controls"></audio> <audio controls="controls"> <source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mp3"> </audio> </div> <div> <video poster="http://www.w3school.com.cn/i/eg_cute.gif" controls="controls" src="http://www.w3school.com.cn/i/movie.ogg"></video> <video controls="controls"> <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"></source> <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"></source> </video> </div> </body> </html>