当前位置：首页 > news >正文

HTML5新特性|01 音频视频

news 2025/7/23 23:01:47

音频

1、Audio (音频)
HTML5提供了播放音频文件的标准

2、control(控制器)
control 属性供添加播放、暂停和音量控件

3、标签:

<audio>  定义声音
<source> 规定多媒体资源,可以是多个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音频</title>
</head>
<body><!-- <audio src="C:Users/Administrator/Videos/1.mp4" controls="controls">浏览器不支持</audio> --><audio controls="controls"><!-- 一般浏览器都可以播放ogg文件，这样保证基本每个浏览器都能播放这段音频 --><source src="../raw/1.mp4" ><source src="../raw/1.ogg" ></audio>
</body>
</html>

在这里插入图片描述

视频

1、video (视频)
HTML5 提供了展示视频的标准

2、control (控制器)
control属性供添加播放、暂停和音量控件

3、标签:

<video>    定义声音
<source>   规定多媒体资源,可以是多个

4、属性:
width: 宽
height: 高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频</title></head>
<body><!-- ffmpeg.org -->
<!--    此标签格式 IE 不支持，如果要查看浏览器是否支持，可以在官网 w3school.com.cn 上阅读-->
<!--    另外，如何进行转码和转码之后如何进行使用可以在官网  ffmpeg.org 上阅读--><!-- <video src="../raw/1.mp4" controls="controls" height="300px" width="300px">浏览器不支持</video> --><video controls="controls" height="300px" width="300px"><source src="../raw/1.mp4" ><source src="../raw/1.ogg" ></video></body>
</html>