HTML 引入原生态的多媒体支持,可在浏览器中直接播放音频和视频文件,不需要借助视频插件播放音频和视频。
audio 标签的主要属性如下:
属性 | 值 | 作用 |
---|---|---|
src | URL | 音频文件的 URL,必填 |
controls | controls | 音频就绪后包含播放/暂停按钮的控件 |
autoplay | autoplay | 音频就绪后自动播放 |
loop | loop | 每当音频结束时重新开始循环播放 |
muted | muted | 静音 |
1、src指的是音频地址
2、autoplay需要设置muted之后才生效。
例如:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<audio src="音频路径" controls="controls" autoplay="autoplay" loop="loop">audio>
body>
html>
成对标签 用来在页面的视频播放,支持MP4、webm 和 ogg 三个视频格式; video 标签具有 src、controls、autoplay 和 loop 等属性,其含义跟 audio 标签属性相同。
属性 | 值 |
---|---|
src | 要播放的视频的 URL |
autoplay | 自动播放 |
controls | 显示控件,比如播放按钮 |
loop | 循环播放 |
muted | 输出被静音 |
preload | 页面加载的时候,自动预加载资源 |
height | 设置播放器高度 |
width | 设置播放器宽度 |
poster | 视频封面 |
1、src指的是视频地址
2、autoplay需要设置muted之后才生效。
3、height与width设置后视频并不会拉伸,而是会自动调整大小
4、preload指的是:当前视频会默认下载到内存,不管你点不点即播放
5、poster用于设置视频封面
例如:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<video src="视频路径" autoplay="autoplay" controls="controls" loop="loop">video>
body>
html>