<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 300px;
}
</style>
</head>
<body>
<!-- <audio src="02_media/123.mp3" controls="controls" loop="loop"></audio> -->
<audio controls="controls">
<source src="02_media/123.mp3" type="audio/mpeg">
<source src="02_media/123.ogg" type="audio/ogg">
</audio>
<!-- <video src="02_media/456.mp4" controls="controls"></video> -->
<video muted="muted" loop="loop" poster="02_media/789.jpg" controls="controls">
<source src="02_media/456.mp4" type="video/mp4" />
<source src="02_media/456.ogg" type="video/ogg" />
您的版本太低，不支持播放
</video>
</body>
</html>
<!-- 音频:audio
audio属性:autoplay：有该属性，则音频在就绪后马上播放(谷歌浏览器已禁用)
controls: 有该属性，则向用户显示控件，例如:播放
loop:有该属性,音频结束时重新播放
src:要播放音频的路径
解决浏览器适配问题，即：配置多个音频属性。
视频:video
autopaly:自动播放，谷歌浏览器不支持,解决办法是加静音属性muted
静音muted:muted
controls:向用户显示播放控件
width:pixels(像素)设置播放器宽度
height:pixels(像素)设置播放器高度
循环播放:loop
规定是否预加载视频(如果有autoplay,就忽略该属性)preload:auto(预先加载视频)none(不应加载视频)
src:url(视频url路径)
加载等待的画面图片:poster:lmgurl -->
H5新增的多媒体标签
猜你喜欢
转载自blog.csdn.net/weixin_44079801/article/details/106968049
今日推荐
周排行