咱们一起来聊一聊HTML基础_12

  • HTML 多媒体
    • 什么是多媒体？
    • 浏览器支持
    • 多媒体格式
    • 视频格式
    • 声音格式
    • 使用哪种格式？
  • HTML Object 元素
    • HTML 助手（插件）
    • HTML 音频
    • 使用插件
    • 使用 <embed> 元素
    • 使用 <object> 元素
    • 使用 HTML5 元素
    • 向网站添加音频的最简单方法
    • 使用超链接
    • 内联的声音
    • HTML 4.01 多媒体标签
    • HTML 5 多媒体标签
  • HTML 视频
    • 使用 <embed> 标签
    • 使用 <video> 标签
  • 最好的 HTML 解决方法
    • 优酷解决方案
    • 使用超链接
    • 关于内联视频的一段注释

HTML 多媒体

Web 上的多媒体指的是音效、音乐、视频和动画。
现代网络浏览器已支持很多多媒体格式

什么是多媒体？

 多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
在本篇文章中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体
和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，
图片支持也被加入。
不同的浏览器以不同的方式处理对音效、动画和视频的支持。
某些元素能够以内联的方式处理，而某些则需要额外的插件。

多媒体格式

多媒体元素（比如视频和音频）存储于媒体文件中。
确定媒体类型的最常用的方法是查看文件扩展名。
当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。
.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。
图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式，
比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。
HTML5 、Flash 播放器以及优酷等视频网站均支持它。
格式 文件 描述
AVI .avi AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV .wmv Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG .mpg .mpeg MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime .mov QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo .rm .ram RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash .swf .flv Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式 文件 描述
MIDI .mid .midi MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。
MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio .rm .ram RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave .wav Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA .wma WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3 .mp3 .mpga MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

使用哪种格式？

  1. WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

  2. MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。

HTML Object 元素

<object> 的作用是支持 HTML 助手（插件）。

HTML 助手（插件）

  1. 辅助应用程序（helper application）是可由浏览器启动的程序。
  2. 辅助应用程序也称为插件。
  3. 辅助程序可用于播放音频和视频（以及其他）。
  4. 辅助程序是使用 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，
您能够允许用户来控制部分或全部播放设置。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

HTML 音频

在 HTML 中播放声音的方法有很多种。

问题，问题，以及解决方法
在 HTML 中播放音频并不容易！
您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中
（Internet Explorer, Chrome, Firefox, Safari, Opera）
和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，
在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例

<embed height="100" width="100" src="song.mp3" />

问题：

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

使用 <object> 元素

<object tag> 标签也可以定义外部（非 HTML）内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例

  <object height="100" width="100" data="song.mp3"></object>

问题：

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 HTML5 元素

    <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

实例

 <audio controls="controls"><source src="song.mp3" type="audio/mp3" /><source src="song.ogg" type="audio/ogg" />Your browser does not support this audio format.</audio>

问题：

 <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。<audio> 元素在老式浏览器中不起作用。

注释：使用 (HTML5) 解决验证问题。

向网站添加音频的最简单方法

向网页添加音频的最简单的方法是什么？

 雅虎的媒体播放器绝对算其中之一。

使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。

它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。

雅虎媒体播放器
实例

<a href="song.mp3">Play Sound</a><script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

实例

<a href="song.mp3">Play the sound</a>

内联的声音

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音，
您需要意识到很多人都觉得内联声音令人恼火。
同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。
一个正面的例子是，在用户需要听到录音并点击某个链接时，
会打开页面然后播放录音。

HTML 4.01 多媒体标签

标签 描述
<applet> 不赞成。定义内嵌 applet。
<embed> HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
<object> 定义内嵌对象。
<param> 定义对象的参数。

HTML 5 多媒体标签

标签 描述
<audio> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。

HTML 视频

在 HTML 中播放视频的方法有很多种。

使用 <embed> 标签

<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：

实例

  <embed src="movie.swf" height="200" width="200"/>

问题

HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 <video> 标签

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

实例

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

您必须把视频转换为很多不同的格式。

<video> 元素在老式浏览器中无效。
<video> 元素无法通过 HTML 4 和 XHTML 验证

最好的 HTML 解决方法

 HTML 5 + <object> + <embed>

 <video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" /><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240" /></object></video>

 上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

问题:

您必须把视频转换为很多不同的格式
<video> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

优酷解决方案

    在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

  <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"></embed>

使用超链接

    如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：

实例

 <a href="movie.swf">Play a video file</a>

关于内联视频的一段注释

当视频被包含在网页中时，它被称为内联视频。如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。
我们最好的建议是只在用户希望看到内联视频的地方包含它们。
一个正面的例子是，在用户需要看到视频并点击某个链接时，
会打开页面然后播放视频。

咱们一起来聊一聊HTML基础_12相关推荐

  1. 刚学计算机先学什么好,计算机语言入门先学什么？

    刚想开始计算机学习的小白难免会有这样的困惑:计算机语言入门先学什么?简单来讲,初学者需要先了解各种计算机语言,熟悉计算机组成原理,学习数据结构与算法.数据库.基础语法等等,这些都是必须经历的基础学习阶 ...

  2. dhcp服务器批量修改ip租期,dhcp服务器的ip地址租期默认是多久

    dhcp服务器的ip地址租期默认是多久 内容精选 换一换 Atlas 200 DK开发者板支持通过USB端口或者网线与Ubuntu服务器进行连接,连接示例图如图1所示.Atlas 200 DK连接Ub ...

  3. 超硬核Python避坑学习方案奉上！入门到就业一篇就搞定！

    本文收录了python从基础入门到高级进阶,再到之后发展方向的详细介绍,欢迎小伙伴们关注阅读!相信对你的python学习之路定能助一臂之力!评论提出你的见解!大家一起为你解答! 目录 一.迈出开发的第 ...

  4. 西宁服务器维修,青海西宁移动DNS服务器IP地址

    青海西宁移动DNS服务器IP地址 内容精选 换一换 以下内容主要来自于<网络是怎样连接的>.<计算机网络自顶向下方法>.猿人谷:面试官,不要再问我三次握手和四次挥手等网络博文, ...

  5. 趣谈 DHCP 协议，有点意思。

    计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...

  6. 路由器说服务器无响应,路由器设置说服务器没响应

    路由器设置说服务器没响应 内容精选 换一换 需要提升您的网络速率.您可以参见Iperf的测试网络的方法?章节测试从迁移源端服务器到华为云(目的端服务器)的网络性能.如果网络速率小于500kbit/s, ...

  7. Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）

    一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...

  8. 后浪推前浪，一浪比一浪高；来自老鸟们的分享

    当前形势 每年的毕业大军,就业竞争都是非常激烈.今年预计就业形势不容乐观,与往年不同的是,今年经济整体不好,各科技公司裁员.降薪你方唱罢我方登场,喋喋不休.两者叠加,那可想而知,大家要提前做好规划和准 ...

  9. 老师和我说，计算机网络就该这么学！

    关于计算机网络如何学习,我就拿自己亲身实践的来举例吧,因为我也自学学起的. 我觉得最重要的就是看书(博客) + 实践. 当然视频是最快速的入门方式,你可以先看视频有所了解后再去看书系统学习 视频 今天 ...

最新文章

  1. 生成pojo mysql_通过数据库表反向生成pojo类
  2. Javascript 动态修改select方法大全【转】
  3. 湘乡江南计算机学校,湘乡职业中等专业学校2021年招生录取分数线
  4. Visual C++ 中的ODBC编程
  5. java创建xml设置路径_java 写入xml文件 地址如何设置为局域网内的另一台服务器上...
  6. afg低功耗状态黑苹果_拔草1L小主机 Dell9020m  + 黑苹果折腾记录
  7. SpringCloud微服务实战—翟永超 读书笔记
  8. Socket编程项目VS开发环境配置
  9. 宁波大学数学系好老师推荐
  10. unity测量模型尺寸
  11. FTP服务器的搭建及测试
  12. python爬虫 - 代理ip正确使用方法
  13. 星际篮球、星际蹦床……这届小朋友太会玩了吧？
  14. 数说热点 | 跟着《长月烬明》起飞，今年各地文旅主打的就是一个听劝
  15. java里用idea是什么意思_idea什么意思?啥意思?idea简介
  16. HTML + CSS + JS做一个绘画分享网站[开源项目]
  17. 简单实现B/S服务器
  18. 计算机组成原理小游戏,计算机组成原理cla是什么
  19. YII CONCAT
  20. [bzoj1502]月下柠檬树

热门文章

  1. 计算机网络通讯传输的是,计算机网络通信系统是（计算机网络通信系统是）
  2. 数据库技术学习内容与学习方法
  3. java后端开发需要学什么_从事Java后端开发，要学习哪些知识和技能？
  4. python上手--flask框架web开发实践-数据库
  5. ERP售前顾问形象寓意
  6. 端游公司醒了:手游圈来了几只老虎
  7. Matlab 关于彩色图像的平移、旋转以及对称处理
  8. 基于FPGA的 TMDS 编码 及 HDMI 显示
  9. [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `nu
  10. java rsa 生成公钥私钥_[Java教程]java RSA 生成公钥私钥