video和audio

视频标签（目前仅支持三种格式MP4、webm、ogg）

video标签的属性

src: 用于告诉video标签需要播放的视频地址

autoplay: 用于告诉video标签是否需要自动播放视频

controls: 用于告诉video标签是否需要显示控制条

poster: 用于告诉video标签视频没有播放之前显示的占位图片

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

用于缓冲大文件;它可以采用以下三个值之一：

• "none"不缓冲文件
• "auto"缓冲媒体文件
• "metadata"仅缓冲文件的元数据

muted:静音

width/height: 和img标签中的一模一样

 第一种格式

<video src="images/sb1.webm"  autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>

 第二种格式

<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

 

音频标签（目前仅支持三种格式MP3、WAV、ogg）

audio属性

src: 用于告诉audio标签需要播放的音频地址

autoplay: 用于告诉audio标签是否需要自动播放音频

controls: 用于告诉audio标签是否需要显示控制条

loop: 一般用于做广告视频, 用于告诉video标签音频播放完毕之后是否需要循环播放

preload: 预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效。

muted:静音

<audio autoplay="autoplay" controls="controls">
    <source src="images/yinyue.mp3" type="audio/mp3">
</audio>