HTML多媒体（插件/音频/视频/YouTube）：一篇就够用

最新推荐文章于 2024-05-14 21:28:28 发布
最新推荐文章于 2024-05-14 21:28:28 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： HTML入门、进阶与实战 文章标签： html 音视频 前端 前端框架 媒体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59180666/article/details/128962652
版权

HTML媒体

Web 上的多媒体指的是音效、音乐、视频和动画。

现代网络浏览器已支持很多多媒体格式。

什么是多媒体？

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

在因特网上，我们经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

在本教程中，我们将了解到不同的多媒体格式，以及如何在我们的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。

我们将在下面学习更多有关插件的知识。

多媒体格式

多媒体元素（比如视频和音频）存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

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

声音格式

格式文件描述
MIDI
  • .mid
  • .midi

MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。

点击这里播放 The Beatles。

因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。

RealAudio
  • .rm
  • .ram
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA.wmaWMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3
  • .mp3
  • .mpga
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

使用哪种格式？

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

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

HTML插件

插件（Plug-in）是扩展浏览器标准功能的计算机程序。

插件

插件被设计用于许多不同的目的：

  • 运行 Java 小程序
  • 运行 ActiveX 控件
  • 显示 Flash 电影
  • 显示地图
  • 扫描病毒
  • 验证银行账号

警告！

大多数浏览器不再支持 Java Applet 和插件。

所有浏览器均不再支持 ActiveX 控件。

在现代浏览器中，对 Shockwave Flash 的支持也已关闭。

<object> 元素

所有浏览器均支持 <object> 元素。

<object> 元素定义 HTML 文档中的嵌入式对象。

它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中：

实例

<object width="100%" height="500px" data="snippet.html"></object>

亲自试一试

或者我们喜爱的图像：

实例

<object data="audi.jpeg"></object>

亲自试一试

<embed> 元素

所有主要浏览器均支持 <embed> 元素。

<embed> 元素也可定义了 HTML 文档中的嵌入式对象。

Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。

实例

<embed src="audi.jpeg">

亲自试一试

注意，<embed> 元素没有结束标记。它无法包含替代文本。

<embed> 元素也可用于在 HTML 中包含 HTML：

实例

<embed width="100%" height="500px" src="snippet.html">

亲自试一试

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> 元素

<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>

亲自试一试

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。

问题：

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

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

最好的 HTML 解决方法

实例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

亲自试一试

上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

问题：

  • 我们必须把音频转换为不同的格式。
  • <audio> 元素无法通过 HTML 4 和 XHTML 验证。
  • <embed> 元素无法通过 HTML 4 和 XHTML 验证。
  • <embed> 元素无法回退来显示错误消息。

注释：使用 <!DOCTYPE html> (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 中播放视频的方法有很多种。

实例

<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>

亲自试一试

问题以及解决方法

在 HTML 中播放视频并不容易！

这需要谙熟大量技巧，以确保视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

下面是总结了的问题和解决方法。

使用 <embed> 标签

<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 代码显示嵌入网页的 Flash 视频：

实例

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

亲自试一试

问题

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

使用 <object> 标签

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

实例

<object data="movie.swf" height="200" width="200"/>

亲自试一试

问题

  • 如果浏览器不支持 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 4.01 多媒体标签

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

HTML 5 多媒体标签

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

HTML与YouTube

在 HTML 中包含视频的最简单的方法是，使用 YouTube。

纠结视频格式？

将视频转换为不同的格式可能既困难又耗时。

一个更简单的解决方案是让 YouTube 在我们的网页中播放视频。

YouTube Video Id

保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）。

我们可以使用这个 id，并在 HTML 代码中引用这条视频。

在 HTML 中保费 YouTube 视频

如需在网页上播放视频，请执行以下操作：

  • 将视频上传到 YouTube
  • 记下视频 id
  • 在我们的网页中定义 <iframe> 元素
  • 让 src 属性指向视频的 URL
  • 使用 width 和 height 属性来规定播放器的尺寸
  • 向 URL 添加其他参数（参阅下文）

实例

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

亲自试一试

YouTube Autoplay + Mute

我们可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放。但是，自动开始播放视频会让访问者感到烦恼！

注意：在大多数情况下，Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。

在 autoplay=1 之后添加 mute=1，可让视频自动开始播放（但已静音）。

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

亲自试一试

YouTube Playlist

以逗号分隔的要播放的视频列表（原始 URL 除外）。

YouTube Loop

添加 loop=1 会让视频永远循环。

值 0（默认）：视频将播放一次。

值 1：视频将循环（永远）。

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

亲自试一试

YouTube Controls

添加 controls=0 会使视频播放器不显示控件。

值 0：播放器控件不显示。

值 1（默认）：播放器控件显示。

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

亲自试一试

Vec_Kun
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ejemplo：教程Youtube：https：//www.youtube.comwatch？v = 8ajfNnyu8yk
02-22
埃普里普隆大街 Crear nuestro底漆登录básicoconvalidaciónynavegaciónentre ventanas。 信息通报 包围YouTube的视频： ：
Fast audio to video converter + image:将音频文件转换为youtube / socal平台的MP4视频。 > FFMPEG-开源
05-12
使用FFMPEG将音频文件转换为youtube /社交平台的MP4视频。 允许您添加将在视频中显示的图片。 我建议使用与您希望视频具有相同分辨率的图像，例如720p等（1280x720）等。您可以将音频文件拖放到此应用程序中，它将...
HTML多媒体
远方水木
03-19 732
HTML多媒体 web上的多媒体是指音效、音乐、视频和动画，现代网络浏览器已经支持很多多媒体格式。 在HTML5之前，主要提供两种元素进行多媒体的展示，一个是&lt;embed&gt;标签，另一个是&lt;object&gt;标签。 &lt;embed&gt; 播放音乐 &lt;embed src="Trouble is a friend.mp3" width="200px" he...
HTML 多媒体
qq_38636998的博客
10-19 305
HTML 多媒体 一、简介 Web 上的多媒体指的是音效、音乐、视频和动画。多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等 二、audio标签 1、作用 播放音频 2、语法格式 格式1 &lt;audio src=""&gt; &lt;/audio&gt; 格式2 &lt;audio&gt; &lt;source src=...
HTML——多媒体
qq_45823118的博客
03-16 3186
HTML图片：带图片的菜谱网页任务描述相关知识概念属性alt属性:提供替换文本height,width属性 ：设定图形尺寸align属性：设置对齐与浮动方式任务要求 任务描述 Web世界绚丽多彩，除了显示文本以外，网页中还能包含图片、动画、音频和视频等多媒体信息。 在本关中，你将编写一个带图片的菜谱网页。通过本关，你将学习如何使用HTML在网页中添加图片，以及如何设置相关的图片属性。 本关网页显示效果如下图所示： 相关知识 概念 在 HTML 中，我们使用 <img> 标签定义图像。 基本的写
H5多媒体标签
ayhg1的博客
06-04 429
H5多媒体标签 在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。 audio标签（音频播放） 本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：
MediaCore 是一个多媒体的建站系统，主要的功能包括视频、音频.播客和 iTunes RSS 生成.rar
07-05
MediaCore 是一个多媒体的建站系统，主要的功能包括视频、音频、YouTube集成、播客和 iTunes RSS 生成，用户可以提交各种多媒体内容。 《开源中国》网站上说它是一个开源系统，但是在官方网站上没有找到源代码下载...
youtube-embed：一个在复制YouTube视频播放器页面时练习将视频嵌入html页面的项目
02-19
一个在复制YouTube视频播放器页面时练习将视频嵌入html页面的项目。 致谢： Icons found at Font Awesome and supported under Creative Commons License. https://creativecommons.org/licenses/by/4.0/
phileYoutube:一个基于ID生成youtube视频的插件
06-05
一个基于 ID 生成 Youtube 视频的插件。 它可以用于您的主题或 Markdown。 特征 在 Markdown 中使用 在带有 Twig 的模板中使用 自动抓取标题 1.1 安装（作曲家） php composer.phar require phile/youtube:* 1.2 ...
html中插入wmv格式视频文件的代码
10-29
在网页中(所有网页都由html组成，所以说下面的代码，可以用于任何网页，部分限制了html的网页除外
HTML常用标签-多媒体标签（图片、音频、视频）
最新发布
weixin_44201223的博客
05-14 320
图片标签 音频标签 视频标签
HTML5多媒体
阳神
02-15 369
方法：load()、play()、pause() 属性：currentSrc、currentTime、duration 事件：oncanplay， ontimeupdate，onended 等 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <tit...
HTML之多媒体标签
dream_follower的博客
07-22 533
1.video标签 video标签用于在网页中嵌入音频和视频，设置语法如下： &lt;video src="file_url"&gt;&lt;/video&gt; 常用属性如下： 属性 描述 src 指定嵌入对象的文件路径 autoplay 嵌入对象在加载页面后自动播放 controls 出现该属性，则向用户显示控件 prel...
【HTML--多媒体标签、表格标签、超链接】
jsj18700625723的博客
06-12 1095
多媒体标签，表格标签，超链接
HTML5之多媒体标签
arvin_top的博客
04-22 1852
audio标签video标签 •音频：不支持时显示 •视频：不支持时显示 •controls属性：属性值与属性名同。可以省略。控制显示默认控制条。 •source标签：用来指定多个音频或视频文件源。 支持格式 多媒体API---常用属性 多媒体API---常用方法 多媒体API---常用事件
学习笔记之HTML5-多媒体
feng_en_t的博客
12-29 490
1. HTML5音频 HTML5中，新增了audio元素，用来播放声音文件或者音频流。 语法： src属性用于指定要播放的声音文件，controls属性用于提供播放、暂停和音量控件。 &lt;audio src="test.mp3" controls="controls"&gt;&lt;/audio&gt; 注意：src属性定义媒体文件的URL。替换内容不仅可以使用文本，还可以是一些其他...
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1万+
一、HTML5 多媒体标签 二、音频标签 三、音频标签代码示例 ( 默认操作 ) 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vec_Kun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值