HTML基础-跟着李南江学编程

最新推荐文章于 2024-09-13 17:21:46 发布

子.星语

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量105

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ljh1972/article/details/106211475

版权

音频和视频支持
HTML5最大的新特色之一就是支持音频和视频。在HTML5之前，我们必须使用插件如Silverlight 或Flash来实现这些功能。在HTML5中，你可以直接使用新标签< audio> 和 < video>将音频和视频嵌入到页面。

从编码的角度来看，audio和video元素使用起来很简单（下面我会深入地谈到它们的一些属性）。所有的主流浏览器都支持audio和video元素，包括最新版本的IE、Firefox、Chrome、Opera和Safari。虽然如此，有一点很关键：你需要编码解码器去播放音频和视频，而不同的浏览器支持的编码解码器是不同的（想要进一步了解视频容器和编码解码器，可以访问链接http://diveintohtml5.org/video.html）。幸运的是，这不会成为技术障碍，因为HTML5对音频和视频的支持方式非常灵活（各个浏览器支持的音频和视频格式一般有好几种，它会轮流使用这几种格式去播放音频和视频）。*当然，你最好提供多种格式的音频和视频源，以满足不同浏览器的需求。*此外，你还可以继续使用Silverlight或Flash插件。最后，在开始和结束标签（例如< audio> 和 < /audio>）之间的文本，会在浏览器不支持audio或video元素的时候显示到web页面上。

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

执行这段代码时，浏览器将首先试图播放laughter.mp3文件。如果没有合适的编码解码器去播放，它会转向播放下一个文件laughter.ogg。如果浏览器根本不认识audio元素，它会在音频控件的位置显示文本“Your browser does not support the audio element”。

关于音频和视频，需要警告大家的是：HTML5并没有内置的数字版权管理（digital rights management，简称DRM）支持，作为开发人员，你必须自己实现它。

现在，让我们深入探讨这两个新元素。

音频

首先，让我们看看< audio>的更多细节。

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

前面已经介绍过，浏览器会依次尝试播放每个音频源，直到找到一个能播放的源。

注意这里多了一个controls属性。使用这个属性后，浏览器将显示音频回放控件，包括播放/暂停按钮、时间显示控件、静音按钮和音量控件。在绝大多数情形下，把这些控件展示给用户是明智的。我非常讨厌打开一个网页时有声音响起，而且没法把它停止、静音或者调低，难道你不是这样？

在不同的浏览器中，这些控件的外观并不一样。Chrome浏览器中的音频回放控件如下图所示（它正在播放一首歌）。当你的鼠标指针悬停在整个控件最右边的声音图标上时，将会弹出一个下拉式的音量控制条。

下图是Firefox中的控件样式，截图停在了一首歌暂停的时刻。和Chrome一样，它也有一个弹出式的音量控制条（本图未显示），可以通过将鼠标指针悬停在控件最右边的声音图标上弹出它。

audio元素的其他一些有趣的属性如下表所示。

下面这段示例代码，执行时将显示音频回放控件，并在音频文件加载完成后立刻自动播放，完成后再一遍又一遍地重复播放。

Your browser does not support the audio element. 复制代码

如果你想在自己的浏览器中好好研究< audio>元素，可以参考http://w3schools.com/上的“Tryit Editor”。它可以用来编辑一些示例代码，然后看看会发生什么。此外，你也可以参阅下面这篇文章——How to add an HTML5 audio player to your site（如何向你的站点添加HTML5音频播放器）。
视频现在，让我们试试< video>元素。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>