video

语法：

<video src="文件地址" controls="controls" </video>

常见的属性

属性	值	描 述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动放的问题
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器的宽度
width	pixels(像素)	设置播放器的高度
loop	loop	播放完毕之后是否继续播放改视频，循环播放
preload	auto(预先加载视频)  none(不先加载视频)	规定是否预加载视频（如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

示例

  <!-- 尽量放MP4格式的 -->
  <video autoplay="autoplay" controls="controls" muted="muted" width="500px" height="500px" loop="loop"
    poster="../HTML5和css3-提高/media/xiomi.jpg">
    <source src="../HTML5和css3-提高/media/v.f30.mp4" type="video/mp4">
    <source src="../HTML5和css3-提高/media/v.f30.ogg" type="video/ogg">
    你的浏览器不支持video标签。
  </video>

效果 

 

 audio

语法：

<audio src="文件地址" controls="controls"></audio>

常见属性 

属性	值	描 述
autoplay	autoplay	音频就绪自动播放
controls	controls	向用户显示播放控件
loop	loop	播放完毕之后是否继续播放音频，循环播放
src	loop	播放完毕之后是否继续播放音频，循环播放

示例

 <audio controls="controls">
    <!-- 尽量放MP4格式的 -->
    <source src="../HTML5和css3-提高/yinle/井迪儿 - 失控.mp3" type=" audio/mp4">
    <!-- 尽量放MP3格式的 -->
    <source src="../HTML5和css3-提高/yinle/井迪儿 - 失控.ogg" type="audio/ogg">
    你的浏览器不支持audio标签。
  </audio>

效果