网页中的多媒体添加基础

视频、音频

一、在网页中添加单个视频：video元素

video属性：

• src(源)-指定视频文件的URL
• autoplay(自动播放）-当视频可以播放时立即开始播放
• controls(控件)-添加浏览器为视频设置的默认控件
• muted(静音）-让视频静音
• loop(循环）-让视频循环播放
• poster（海报）-指定视频加载时要显示的图像
• width（宽度）-视频的宽度
• height（高度）-视频的高度
• preload（预加载）-告诉浏览器要加载的视频内容的多少。可以是以下三个值：

1. • □none表示不加载任何视频
2. • □metadata表示仅加载视频的元数据

3. • □auto表示让浏览器决定怎样做（默认设置）

     <video src = "my-video.ext" width = "369" height = "208"> </video>
                                                                           
     

1.为视频添加控件：controls属性 会告诉浏览器添加一套用于控制视频播放的控件。

<video src = "my - video.ext" controls> </video>

2.为视频添加自动播放:autoplay属性

 <video src = "my- video.ext" autoplay controls> </video> 
     

3.为视频指定循环播放和自动播放：loop属性

 <video src = "my- video.ext" autoplay loop> </video> 
     

4.为视频添加指定海报图像：poster属性

 <video src = "my- video.ext" controls poster= "my-poster.jpg"> </video> 
     

5.阻止视频预加载: preload="none"

<video src= "my- video.ext" preload = "none" controls> </video> 	

6.使用多种来源的视频和备用文本

<video controls>
<source src = "my- video.mp4" type = "video / mp4">
<source src = "my- video.webm" type = "video / webm">
</video>

二、在网页中添加带控件的单个音频文件：audio元素

<audio src="my-audio.ext" controls></audio>

自动播放、循环和预加载音频

 <audio src = "my- audio.ext" autoplay controls> </audio>
 <audio src = "my- audio.ext"loop controls> </audio>
 <audio src = "my- audio.ext" preload="metadata" controls> </audio>
 

提供带有多个备用内容的多个视频源：

<audio  controls>
<source src = "my- audio.ogg" type = "audio / ogg">
<source src = "my- audio.mp3" type = "audio / mp3">
</audio>