HTML5新特性|01 音频视频

news2025/1/4 19:19:15

音频

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>