HTML5与CSS3【第十七章视频、音频及其他多媒体(三)】

最新推荐文章于 2024-07-29 08:18:41 发布

Luminous烁

最新推荐文章于 2024-07-29 08:18:41 发布

阅读量756

点赞数

分类专栏： html5 文章标签： html5 css3 音视频

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125985199

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

第十七章视频、音频及其他多媒体

17.11提供带备用内容的多个视频源
17.12添加具有备用 Flash 的视频和音频
17.13高级多媒体

在这里插入图片描述

17.11提供带备用内容的多个视频源

为了获得所有兼容 HTML5 的浏览器的支持，至少需要为音频提供两种格式。实现这一目标的方法同 video 元素也是一样的，即使用source元素。备用方法跟audio元素也一样。你可能猜到了，浏览器会忽略它不支持的音频格式，而显示它支持的音频格式。不支持 audio 元素的浏览器显示备用内容。

...
<body>
 <audio controls>
 <source src="piano.ogg" 
➝ type="audio/ogg">
 <source src="piano.mp3" 
➝ type="audio/mp3">
 <p>Your browser doesn't support 
➝ HTML5 audio, but you can 
➝ <a href="piano.mp3">download the 
➝ audio file</a> (MP3, 1.3 MB).</
p>
 </audio>
</body>
</html>

这个 audio 元素（含默认控件集）定义了两个音频源文件，一个编码为Ogg，另一个为MP3。完整的过程同指定多个视频源文件的过程是一样的。浏览器会忽略它不能播放的，仅播放它能播放的

指定两种不同的音频来源的步骤
(1) 获取音频文件。
(2) 输入 <audio controls> 开始 audio 元素（含默认控件集）。
(3) 输入<source src="my-audio.ogg" type="audio/ogg">，这里的my-audio.ogg 是 Ogg Vorbis指向你的音频文件。
(4) 输入<source src="my-audio.mp3" type="audio/mp3">，这里的my-audio.mp3 指向你的 MP3 音频文件。
(5) 可选步骤（但推荐带着）。对于不支持 HTML5 音频元素的浏览器创建备用内容或音频下载链接。
(6) 输入 </audio> 结束 audio 元素。

17.12添加具有备用 Flash 的视频和音频

除了可以提供下载链接作为备用方案，还可以（或许可以说应该）嵌入一个能播放MP4 视频文件的 Flash 备用播放器。是的，尽管 HTML5 和原生多媒体非常强大，但为了照顾那些无法处理这些技术的旧浏览器（比如 IE9 之前的版本），恐怕还得求助于嵌入Flash 内容的方法。也就是说，如果希望获得尽可能多的用户，至少还有一种选择！

加粗样式1. 为网页添加 MediaElement.js
页面需要加载一套特殊的文件，无论是为视频还是为音频设置备用播放器。
(1) 创建一个新的 HTML 页面，或者打开一个现有的页面。
(2) 将图 17.13.4 中突出显示的代码添加到页面中，从而让页面加载必要的样式表和JavaScript 文件。
(3) 将页面保存到放置 build 文件夹的目录（如图 17.13.5 所示）。

2. 为视频添加备用 Flash 的步骤
(1) 获取视频资源。
(2) 输入开始 video 元素（含默认控件集）。如有需要，在此处指定 width、height、poster 等其他属性。
(3) 输入，这里的myVideo.mp4 是 MP4 视
频源文件的名称。
(4) 输入<source src="myVideo.webm"type=“video/webm”>，这里的my-video.webm 是 WebM视频源文件的名称。
(5) 如有需要，为不支持 HTML5 视频和Flash 的浏览器提供备用信息和链接。
(6) 输入结束 video 元素。
(7) 将图 17.13.6 中突出显示的代码添加到页面中，从而初始化一个视频播放器。将script 放到的前面，哪怕页面拥有视频以外的其他内容。

HTML5 Media with Fallback Flash ➝ Player 这段视频代码看起来很熟悉。事实上，它与先前引用多个来源的代码是一样的。根据需要，可以添加其他的属性或删除一部分属性。底部的脚本告诉 MediaElement.js 施展它的魔法

3. 为音频添加备用 Flash 的步骤
(1) 获取音频文件。
(2) 输入 <audio controls> 开始 audio 元素（含默认控件集）。
(3) 输入<source src="my-audio.ogg"type="audio/ogg">，这里的 my-audio.ogg 指向你的 Ogg Vorbis 音频文件。
(4) 输入<source src="my-audio.mp3"type="audio/mp3">，这里的 my-audio.mp3 指向你的 MP3 音频文件。
(5) 如果需要，为不支持 HTML5 音频或者 Flash 的旧浏览器创建信息和链接。
(6) 输入 </audio> 结束 audio 元素。
(7) 将图中突出显示的代码添加到页面中去，从而初始化音频播放器。将script 放到 </body> 的前面，哪怕页面拥有音频以外的其他内容。

17.13高级多媒体

使用 HTML5 原生多媒体的另一个好处是可以利用很多来自 HTML5 或与 HTML5 相关的新特性和新功能。本节主要讨论其中的两个：canvas 元素和 SVG。
1. 通过 canvas 操作视频
使用 canvas 元素及相应的 JavaScript API可以在网页上描制并创建动画。可以对 HTML5 视频应用这些 API，因为video 元素可以同其他 HTML 元素一样进行处理，因此它也可以被 canvas 访问和获取。通过 JavaScript API，可以从播放的视频中抓取图像，并在 canvas 元素中重新绘制该图像，从而创建视频的截图。通过API可以对单个图像像素进行操作，同时由于可以根据视频在 canvas 中创建图像，因而可以调整视频的像素。例如，可以将视频转化为灰度模式。这只是让你对通过 canvas 操作 video 元素建立一些简单的概念，对这一主题的深入探讨已经超出了本书的范围。
2. 联合使用 SVG 和视频
人们开始关注的另一项与 HTML5 有关的技术是SVG（Scalable Vector Graphic，可缩放矢量图形）。
SVG 已经存在相当一段时间了（它诞生自1999 年），但直到 HTML5 才有了 svg 元素。通过该元素可以在网页本身嵌入 SVG 定义。SVG 使用 XML 定义图形和图像，浏览器则对其进行解释和使用，从而描绘出真正的图形。SVG 定义所包含的全部内容就是对如何绘制和绘制什么的说明。使用 SVG 创建的图像也是基于矢量而不是基于光栅的。这意味着它们可以很好地适应缩放，因为浏览器只是简单地依照绘制说明，根据所需的尺寸，将图形绘制出来。相较而言，GIF、PNG 和 JPEG 文件等光栅光栅图像包含的是像素数据，如果要以远大于原始图像的尺寸重新绘制图像，就会因为缺少足够的像素数据导致图像质量受损。