5.6 音频与视频

最新推荐文章于 2024-05-04 13:51:18 发布

剪影的

最新推荐文章于 2024-05-04 13:51:18 发布

阅读量87

点赞数

分类专栏： HTML学习通笔记文章标签： mysql

本文链接：https://blog.csdn.net/m0_62460019/article/details/131164914

版权

HTML学习通笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

5.6 音频与视频

1、视频

在HTML5之前，网页擅长处理的是文字和图像数据。直到现在，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5提供了展示视频的标准，规定通过<video>元素来包含视频。<video>元素的播放控件，实现了包括播放、暂停、进度和音量控制、全屏等功能，并允许自定义控件的功能和样式。

视频可以理解为一系列连续的图片，<video>元素的使用方法与<img>元素非常相似，具体语法如下所示：

您的浏览器不支持video标签

</video>

其中，controls为视频提供播放控件，<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

<video>元素用于控制视频播放的常用属性如下表所示。

属性	允许取值	取值说明
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒体文件播放完后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src	url	要播放的视频的URL。
width	pixels	设置视频播放器的宽度。

视频文件也有不同格式。目前，<video>标签支持三种视频格式，具体如下：

Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。

MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件。

WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。

目前为止没有一种视频格式让所有浏览器都支持，浏览器对以上格式的支持情况如下表：

视频格式	IE 9	Firefox 4.0	Opera 10.6	Chrome 6	Safari 3.0
Ogg		支持	支持	支持
MPEG 4	支持			支持	支持
WebM		支持	支持	支持

HTML5中提供了<source>标签，用于为<video>指定多个视频源，即多个不同格式视频文件的路径，语法如下所示：

……

</video>

注意：<source>标签对于音频文件同样适用，只需要把video改成audio即可。

视频标签使用举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video元素</title>
</head>
<body>

//不带控制面板的视频播放器
<video src="video/movie.mp4"></video><br/><br/>

<video src="video/movie.mp4" autoplay></video><br/>//自动播放

//带控制面板的视频播放器
<video src="video/movie.mp4" controls></video>
</body>
</html>

2、HTML DOM Video对象

HTML5为Video对象提供了用于DOM操作的方法和事件，以及Video对象的常用属性。接下来将对这部分内容进行介绍。

（1）Video对象的常用方法

方法	描述
load()	加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。
play()	播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。
pause()	暂停播放媒体文件。
canPlayType()	测试浏览器是否支持指定的媒体类型。

（2）Vidio对象的常用属性

属性	描述
currentSrc	返回当前视频的URL。
currentTime	设置或返回视频中的当前播放位置（以秒计）。
duration	返回视频的长度（以秒计）。
ended	返回视频的播放是否已结束。
error	返回表示视频错误状态的MediaError对象。
paused	设置或返回视频是否暂停。
muted	设置或返回是否关闭声音。
volume	设置或返回视频的音量。
height	设置或返回视频的高度值。
width	设置或返回视频的宽度值。

（3）Video对象的常用事件

事件	描述
play	当执行方法play()时触发。
playing	正在播放时触发。
pause	当执行了方法pause()时触发。
timeupdate	当播放位置被改变时触发。
ended	当播放结束后停止播放时触发。
waiting	在等待加载下一帧时触发。

演示Video对象中常用方法、属性和事件的具体应用案例如下：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>JavaScript操作video对象</title>
</head>
<body>
        <video id="myVideo" src="video/myVideo.ogv"></video>
        
        <input type="button" value="播放/暂停" οnclick="playPause()"/>
</body>
<script>
        var myVideo=document.getElementById("myVideo");
        function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
</script>
</html>

3、音频

目前为止在网页中播放音频没有固定的标准，大多数音频是通过插件（比如Flash）来播放的，但并非所有浏览器都有同样的插件，HTML5中提供<audio>标签来定义Web上的声音文件或音频流，它的使用方法与<video>标签基本相同，语法如下：

浏览器不支持audio标签

</audio>

<audio>标签的常用属性如下表所示。

属性	允许取值	取值说明
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒体文件播放完后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src	url	要播放的视频的URL。

<audio>标签支持三种音频格式，具体描述如下：

vorbis：是一种类似ACC的免费、开源的音频编码，是用于替代MP3的下一代音频压缩技术。

MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3 （Moving Picture Experts Group Audio LayerIII），简称为MP3。它能够大幅度降低音频数据量。

WAV：是录音时用的标准的Windows文件格式，文件的扩展名为.WAV，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。

浏览器对上述音频格式的支持情况如下：

音频格式	IE 9	Firefox 4.0	Opera 10.6	Chrome 6.0	Safari 3.0
Vorbis		支持	支持	支持
MP3	支持			支持	支持
Wav		支持	支持		支持

多个音频源使用<source>标签来定义，语法如下：

您的浏览器不支持audio标签

</audio>

音频播放器的简单使用案例如下：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>audio标签的使用</title>
</head>
<body>
        <audio controls>
             <source src="audio/music.mp3" type="audio/mp3">
        </audio>
</body>
</html>

4、HTML DOM Audio对象

（1）Audio对象的常用方法

方法	描述
load()	加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。
play()	播放媒体文件。如果视频没有加载，则加载并播放；如果音频是暂停的，则变为播放。
pause()	暂停播放媒体文件。
canPlayType()	测试浏览器是否支持指定的媒体类型。

（2）Audio对象的常用属性

属性	描述
currentSrc	返回当前音频的URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的MediaError对象。
paused	设置或返回音频是否暂停。
muted	设置或返回是否关闭声音。
volume	设置或返回音频的音量。

（3）Audio对象的常用事件

事件	描述
play	当执行方法play()时触发。
playing	正在播放时触发。
pause	当执行了方法pause()时触发。
timeupdate	当播放位置被改变时触发。
ended	当播放结束后停止播放时触发。
waiting	在等待加载下一帧时触发。

演示audio对象中常用方法、属性和事件的具体应用案例如下：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>JavaScript操作audio对象</title>
</head>
<script>
        //页面加载完毕后执行
        window.οnlοad=function(){
            //通过标签名获取button按钮
            document.getElementsByTagName("button")[0].οnclick= function(){
               //通过标签名获取audio对象
                document.getElementsByTagName("audio")[0].load();
                document.getElementsByTagName("audio")[0].play();
            }
        }
</script>
<body>
        <audio src="audio/demo6-5/music.mp3"></audio>
        <button>播放音乐</button>
</body>
</html>

（4）深入理解audio和video对象

其实<audio>标签和<video>有很大的相似性，Audio对象和Video对象的DOM操作功能都是由HTMLMediaElement对象统一定义的核心功能，Audio对象指的是HTMLAudioElement对象，它完全继承了HTMLMediaElement对象提供的功能，而Video对象指的是HTMLVideoElement对象，在该对象中提供了额外的功能，主要表现在一些额外的属性上，如下表所示。

属性	描述
poster	获取或设置poster属性值。
videoHeight	获取视频的原始高度。
videoWidth	获取视频的原始宽度。
height	设置或返回视频的高度值。
width	设置或返回视频的宽度值。

剪影的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.6 音频与视频

其实<audio>标签和<video>有很大的相似性，Audio对象和Video对象的DOM操作功能都是由HTMLMediaElement对象统一定义的核心功能，Audio对象指的是HTMLAudioElement对象，它完全继承了HTMLMediaElement对象提供的功能，而Video对象指的是HTMLVideoElement对象，在该对象中提供了额外的功能，主要表现在一些额外的属性上，如下表所示。它能够大幅度降低音频数据量。<source src="视频文件地址" type="video/格式">
复制链接

扫一扫