嵌入视频和音频
发布时间:2022-08-11编辑:zhushican阅读(280)
嵌入视频和音频
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",则忽略该属性。 |