首页  >  六六互联  >  嵌入视频和音频

嵌入视频和音频

作者:zhushican  丨  时间:2022年11月02日  丨  分类:六六互联

嵌入视频和音频

1.HTML5中嵌入视频

HTML5中,video标签用于定义播放视频文件的标准,它支持三种视频格式,分别为Ogg、WebM和MPEG4,其基本语法格式如下:

 

 

<video src="视频文件路径"  controls="controls"></video>

 

在上面的语法格式中,src属性用于设置视频文件的路径,controls 属性用于为视频提供播放控件,这两个属性是video元素基本属性。

下面通过案例2-47来演示嵌入视频的方法,如图2-50所示。

例2-47  example47

 

<!DOCTYPE html>
 <html>
 <head>
     <meta  charset="utf-8">
     <title>
在HTML5中嵌入视频</title>
 </head>
 <body>
     <video  src="video/pian.mp4" controls="controls">

 

浏览器不支持video标签</video>
     <video src="video/mailang.webm"  controls="controls"   width="300px" height="300px">浏览器不支持video标签</video>
 </body>
 </html>

                             


嵌入视频和音频

图2-50 HTML5中嵌入视频

值得一提的是,在video元素中还可以添加其他属性,来进一步优化视频的播放效果,具体如下表2-12所示。

表2-12video元素中还可以添加其他属性

                             

 

属性

 
 

 
 

描述

 
 

autoplay

 
 

autoplay

 
 

当页面载入完成后自动播放视频。

 
 

loop

 
 

loop

 
 

视频结束时重新开始播放。

 
 

preload

 
 

preload

 
 

如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

 
 

poster

 
 

url

 
 

当视频缓冲不足时,该属性值链接一个图像,并将该图像按照一定的比例显示出来。

 

2.在HTML5中嵌入音频

在HTML5中,audio标签用于定义播放音频文件的标准,它支持三种音频格式,分别为Ogg、MP3和wav,其基本格式如下:

 

<audio src="音频文件路径"  controls="controls"></audio>

 

在上面的基本格式中,src属性用于设置音频文件的路径,controls 属性用于为音频提供播放控件,这和video元素的属性非常相似。同样< audio >和</ audio >之间也可以插入文字,用于不支持audio元素的浏览器显示。

下面通过案例2-48来演示嵌入音频的方法,如例2-51所示。

例2-48  example48.html

 

<!DOCTYPE html>

 

<html>

 

<head>

 

     <meta charset="utf-8">

 

    <title>在HTML5中嵌入音频</title>

 

</head>

 

<body>

 

<audio src="music/1.mp3"  controls="controls">浏览器不支持audio标签</audio>

 

</body>

 

</html>

 

嵌入视频和音频

图2-51 HTML5中嵌入音频

值得一提的是,在audio元素中还可以添加其他属性,来进一步优化音频的播放效果,具体如下表2-13所示。

表2-13audio元素中还可以添加其他属性

                       

 

属性

 
 

 
 

描述

 
 

autoplay

 
 

autoplay

 
 

当页面载入完成后自动播放音频。

 
 

loop

 
 

loop

 
 

音频结束时重新开始播放。

 
 

preload

 
 

preload

 
 

如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

 


  评论