网页中的多媒体添加基础

视频、音频

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

video属性：

• src(源)-指定视频文件的URL

• autoplay(自动播放）-当视频可以播放时立即开始播放

• controls(控件)-添加浏览器为视频设置的默认控件

• muted(静音）-让视频静音

• loop(循环）-让视频循环播放

• poster（海报）-指定视频加载时要显示的图像

• width（宽度）-视频的宽度

• height（高度）-视频的高度

• preload（预加载）-告诉浏览器要加载的视频内容的多少。可以是以下三个值：

• □none表示不加载任何视频

• □metadata表示仅加载视频的元数据

• □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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

作者：excavate
链接：https://juejin.cn/post/6989513618781896740
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。