HTML5多媒体的特性
在HTML5语法中,<video>标记用于页面添加视频,<audio>标记用于为页面添加音频。
多媒体的支持条件
在实际操作中要考虑视频、音频编解码器,以及浏览器支持等多种因素。
视频和音频编解码器
视频编解码器
定义了多媒体数据流编码和解码的算法,其中编码器主要是对数据流进行编码操作,用于存储和传输。解码器主要是对视频文件进行解码。
音频编解码器
定义了音频数据流编码和解码的算法,其工作原理与视频编解码器一样。
嵌入视频和音频
1.在HTML5中嵌入视频
在HTML5中,video元素用于定义播放视频文件的标准,它支持3种视频格式,分别为Ogg、WebM和MPEG4,其基本语法格式如下:
<video src="视频文件路径" controls="controls"></video>
controls属性用于为视频提供播放控件。
下面通过一个案例来演示嵌入视频的方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在HTML5中嵌入视频</title> </head> <body> <video src="video/pian.mp4" controls="controls" width="200px" height="200px">浏览器不支持video元素</video> </body> </html>
运行效果如图所示:
在video元素中还可以添加其他属性,具体如表所示:
属性 | 值 | 描述 |
autoplay | autoplay | 当页面载入完成后自动播放视频 |
loop | loop | 视频结束时重新开始播放 |
preload | preload | 视频在页面加载时进行加载,并预备播放;如果使用“autoplay”则忽略该属性 |
poster | poster | 视频缓冲不足时,该属性值链接一个图像,并按照一定比例显示出来 |
2.在HTML2中嵌入音频
在HTML5中,audio元素用于定义播放音频文件的标准,它支持3种音频格式,分别为Ogg、MP3和Wav,其基本语法格式如下:
<audio src="音频文件路径" controls="controls"></audio>
下面通过一个案例来演示嵌入式音频的方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在HTML5中嵌入音频</title> </head> <body> <audio src="audio/1.mp3" controls="controls">浏览器不支持audio元素</audio> </body> </html>
运行效果如图所示:
audio的其他属性与video类似。
3.音、视频中的source元素
为了使音、视频能够在各个浏览器中正常播放,往往需要准备多种格式的音、视频文件。在HTML5中,使用source元素可以为video元素或audio元素提供多个备用文件。运用source元素添加音频的格式如下:
<audio controls="controls"> <source src="音频文件地址" type="媒体文件类型/格式"/> <source src="音频文件地址" type="媒体文件类型/格式"/> …… </audio>
- src:用于指定媒体文件的URL地址
- type:指定媒体文件的类型
设置视频的宽和高
运用width和height属性可以设置视频文件的宽度和高度:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css控制视频的宽和高</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 600px; height: 300px; border: 1px solid #000; } video{ width: 200px; height: 300px; background: #f90; float: left; } p{ width: 200px; height: 300px; background: #999; float: left; } </style> </head> <body> <h2>视频布局样式</h2> <div> <p>占位色块</p> <video src="video/pian.mp4" controls="controls">浏览器不支持video标签</video> <p>占位色块</p> </div> </body> </html>
运行效果如图所示:
HTML5音、视频的方法和事件
1.video和audio元素的方法
方法 | 描述 |
load() | 加载媒体文件,为播放做准备。通常用于播放前的预加载,也会用于重新加载媒体文件 |
play() | 播放媒体文件。如果视频没有加载,则加载并播放;如果视频是暂停的,则变为播放 |
pause() | 暂停播放媒体文件 |
canPlayType() | 测试浏览器是否支持指定的媒体类型 |
2.video和audio元素的事件
事件 | 描述 |
play | 当执行方法play()时触发 |
playing | 正在播放时触发 |
pause | 当执行了方法pause()时触发 |
timeupdate | 当播放位置被改变时触发 |
ended | 当播放结束后停止播放时触发 |
waiting | 在等待加载下一帧时触发 |
ratechange | 在当前速率改变时触发 |
volumechange | 在音量改变时触发 |
canplay | 以当前播放速率,需要缓冲时触发 |
canplaythrough | 以当前播放速率,不需要缓冲时触发 |
durationchange | 当播放时长改变时触发 |
loadstart | 在浏览器开始在网上寻找数据时触发 |
progress | 当浏览器正在获取媒体文件时触发 |
suspend | 当浏览器正在获取媒体文件时触发,且文件获取并没有正常结束时触发 |
abort | 当中止获取媒体文件时触发(不是由错误引起的) |
error | 当获取媒体过程中出错时触发 |
emptied | 当所在网路变为初始化状态时触发 |
stalled | 浏览器尝试获取媒体数据失败时触发 |
loadedmetadata | 在加载完媒体源数据时触发 |
loadeddata | 在加载完当前位置的媒体播放数据时触发 |
seeking | 浏览器正在请求数据时触发 |
seeked | 浏览器停止请求数据时触发 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)