HTML - 多媒体

HTML - 多媒体 首页 / HTML入门教程 / HTML - 多媒体

有时您需要在网页中添加音乐或视频,向您的网站添加视频或声音的最简单方法是包括名为embed的特殊HTML标签。

这是embed播放嵌入式Midi文件的简单示例-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src="/html/yourfile.mid" width="100%" height="60" >
         <noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Embed 属性

以下是可以与embed标签一起使用的重要属性的列表。

注意-HTML5中已弃用的 align 和 autostart 属性。不要使用这些属性。

Sr.NoAttribute & Remark
1

align

可以将其设置为中心(center),向左(left)或向右(right)。

2

autostart

此布尔值属性指示媒体是否应自动启动。您可以将其设置为true或false。

3

loop

指定是否应连续播放声音(将循环设置为true),一定次数(正值)或根本不播放(假)

4

playcount

指定播放声音的次数。

5

hidden

指定是否在页面上显示多媒体 。假值表示false,真值表示triue。

6

width

物体的宽度(以像素为单位)

7

height

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-embed-multimedia.html

来源:LearnFk无涯教程网

高度(以像素为单位)

8

name

用于引用对象的名称。

9

src

要嵌入的对象的URL。

10

volume

控制声音的音量。可以从0(关闭)到100(最大音量)。

支持的视频类型

您可以在embed标签内使用各种媒体类型,如Flash电影(.swf),AVI(.avi)和MOV(.mov)文件类型。

  • .swf文件      -   是Macromedia Flash程序创建的文件类型。

  • .wmv文件    -  是Microsoft Window的媒体视频文件类型。

  • .mov文件     -  是Apple的Quick Time Movie格式。

  • .mpeg文件   -  是运动图像专家组创建的电影文件。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src="/html/yourfile.swf" width="200" height="200" >
         <noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
      </embed>
   </body>

</html>

这将产生以下输出-

背景音频

您可以使用HTML bgsound标签在网页背景中播放配乐,当用户首次下载并显示主机文档时,它将下载并播放音频文件, 每当用户刷新浏览器时,背景声音文件也将重播。

该标签只有两个属性 loop 和 src 。这两个属性的含义与上述相同。

无涯教程网

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src="/html/yourfile.mid">
         <noembed><img src="yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

该标签不显示任何组件,并且保持隐藏状态。

Object 标签

HTML 4引入了<object>元素,该元素提供了通用对象包含的通用解决方案。

示例-1

您可以将HTML文档本身嵌入HTML文档中,如下所示:

<object data="data/test.htm" type="text/html" width="300" height="200">
   alt : <a href="data/test.htm">test.htm</a>
</object>

如果浏览器不支持 object 标签,则会在此处显示 alt 属性。

示例-2

您可以将PDF文档嵌入HTML文档中,如下所示-

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
   alt : <a href="data/test.pdf">test.htm</a>
</object>

示例-3

您可以使用<param>标签指定一些与文档相关的参数。 这是嵌入wav文件的示例-

<object data="data/test.wav" type="audio/x-wav" width="200" height="20">
   <param name="src" value="data/test.wav">
   <param name="autoplay" value="false">
   <param name="autoStart" value="0">
   alt : <a href="data/test.wav">test.wav</a>
</object>

示例-4

您可以按如下方式添加Flash文档-

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin" 
   codebase="someplace/swflash.cab" width="200" height="300">
   
   <param name="movie" value="flash/penguin.swf" />
   <param name="quality" value="high" />
   <img src="penguin.jpg" width="200" height="300" alt="Penguin" />
</object>

示例-5

您可以将Java小程序添加到HTML文档中,如下所示-

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width="200" height="200">
   <param name="code" value="applet.class">
</object>

classid 属性标识要使用的Java插件版本。您可以使用可选的 codebase 属性来指定是否以及如何下载JRE。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

赵成的运维体系管理课 -〔赵成〕

SRE实战手册 -〔赵成〕

OAuth 2.0实战课 -〔王新栋〕

动态规划面试宝典 -〔卢誉声〕

手机摄影 -〔@随你们去〕

Spring Cloud 微服务项目实战 -〔姚秋辰(姚半仙)〕

深入浅出分布式技术原理 -〔陈现麟〕

Serverless进阶实战课 -〔静远〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

好记忆不如烂笔头。留下您的足迹吧 :)