So fügen Sie Musik-MP3 in HTML hinzu

醉折花枝作酒筹
Freigeben: 2023-01-06 11:16:36
Original
20001 Leute haben es durchsucht

在html中,可以使用embed标签添加音乐,只需要在body区域内添加“”代码即可。embed标签可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。

So fügen Sie Musik-MP3 in HTML hinzu

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

可以使用embed标签添加音乐, 标签定义嵌入的内容,比如插件。

语法:

embed src=url
Nach dem Login kopieren

说明:embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE 都支持。url为音频或视频文件及其路径,可以是相对路径或绝对路径。

示例:

代码如下:

<embed src="your.mid">
Nach dem Login kopieren

二、属性设置

1、自动播放:

语法:autostart=true、false

说明:该属性规定音频或视频文件是否在下载完之后就自动播放。

  • true:音乐文件在下载完之后自动播放;

  • false:音乐文件在下载完之后不自动播放。

示例:

代码如下:

<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>
Nach dem Login kopieren

2、循环播放:

语法:loop=正整数、true、false

说明:该属性规定音频或视频文件是否循环及循环次数。

属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;

属性值为true时,音频或视频文件循环;

属性值为false时,音频或视频文件不循环。

示例:

代码如下:

<embed src="your.mid" autostart=true loop=2>
 <embed src="your.mid" autostart=true loop=true>
 <embed src="your.mid" autostart=true loop=false>
Nach dem Login kopieren

3、面板显示:

语法:hidden=ture、no

说明:该属性规定控制面板是否显示,默认值为no。

  • ture:隐藏面板;

  • no:显示面板。

示例:

代码如下:

<embed src="your.mid" hidden=ture>
 <embed src="your.mid" hidden=no>
Nach dem Login kopieren

4、开始时间:

语法:starttime=mm:ss(分:秒)

说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。

示例:

代码如下:

<embed src="your.mid" starttime="00:10">
Nach dem Login kopieren

5、音量大小:

语法:volume=0-100之间的整数

说明:该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。

示例:

代码如下:

<embed src="your.mid" volume="10">
Nach dem Login kopieren

6、容器属性:

语法:height=# width=#

说明:取值为正整数或百分数,单位为像素。该属性规定控制面板的高度和宽度。

height:控制面板的高度;
 width:控制面板的宽度。
Nach dem Login kopieren

示例:

代码如下:

<embed src="your.mid" height=200 width=200>
Nach dem Login kopieren

7、容器单位:

语法:units=pixels、en

说明:该属性指定高和宽的单位为pixels或en。

示例:

代码如下:

<embed src="your.mid" units="pixels" height=200 width=200>
 <embed src="your.mid" units="en" height=200 width=200>
Nach dem Login kopieren

8、外观设置:

语法:controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明:该属性规定控制面板的外观。默认值是console。

  • console:一般正常面板;

  • smallconsole:较小的面板;

  • playbutton:只显示播放按钮;

  • pausebutton:只显示暂停按钮;

  • stopbutton:只显示停止按钮;

  • volumelever:只显示音量调节按钮。

示例:

代码如下:

<embed src="your.mid" controls=smallconsole>
 <embed src="your.mid" controls=volumelever>
Nach dem Login kopieren

9、说明文字:

语法:title=#

说明:#为说明的文字。该属性规定音频或视频文件的说明文字。

示例:

代码如下:

<embed src="your.mid" title="第一首歌">
Nach dem Login kopieren

扩展资料:

WebM的倡导

由于AVC(H.264)的授权问题,以Chrome、Firefox、Opera为首的开源阵营开始动摇对AVC的支持,尽管目前这些浏览器仍然能够支持AVC,但是它们也倾向于一个叫做WebM的开源多媒体项目,该项目包括一个叫VP8的新的开源视频编解码方案。目前VP8已经发展到了VP9。作为封装格式的WebM具有.webm的后缀和video/webm的MIME类型。在音频方面,可以使用Vorbis/Opus。从兼容性看,Chrome、Firefox、Opera对VP8的兼容性相当理想,但是Safari和IE几乎无法支持。

开源的Ogg

Ogg几乎与WebM相同,开源,被广泛的在开源平台支持。其视频编码方案称为Theora(有VP3发展而来,由Xiph.org基金会开发,可被用于任何封装格式),音频为Vorbis。后缀通常为.ogv或.ogg,MIME类型为video/ogg。在兼容性上,Chrome、Firefox、Opera能够支持(但是Opera在移动平台上无法支持),但是Safari和IE几乎无法支持。

Html5方案

以上的讨论实际上的大前提是:视频基于Html5的

Codecs/container

IE

Firefox

Safari

Chrome

Opera

iPhone

Android

Theora+Vorbis+Ogg

·

3.5+

5.0+

10.5+

·

·

H.264+AAC+MP4

9.0+

·

3.0+

5.0+‡

·

3.0+

2.0+

WebM

9.0+*

4.0+

6.0+

10.6+

·

2.3+

* IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。

‡ Google Chrome 2011年宣布 放弃H.264, 但是“还没兑现”。

可以看出现在主流的仍然是MP4(AVC),但是为了解决“开源阵营”对AVC的摇摆不定,可以选择利用video的多源方案,在AVC的基础上额外提供对webm或ogg的支持:

<video poster="movie.jpg" controls>
        <source src="movie.webm" type=&#39;video/webm; codecs="vp8.0, vorbis"&#39;>
        <source src="movie.ogg" type=&#39;video/ogg; codecs="theora, vorbis"&#39;>
        <source src="movie.mp4" type=&#39;video/mp4; codecs="avc1.4D401E, mp4a.40.2"&#39;>
        <p>This is fallback content</p>
</video>
Nach dem Login kopieren

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件,当然服务端必须对同一个视频提供多种格式的支持,具体可以这么做:

  1. 提供一个WebM的视频版本(VP8+Vorbis)

  2. 提供一个MP4的视频版本(H.264+AAC(low complexity))

  3. 提供Ogg版本(Theora+Vorbis)

服务端推荐使用nginx,尽量注意MIME类型的配置正确

推荐学习:html视频教程

Das obige ist der detaillierte Inhalt vonSo fügen Sie Musik-MP3 in HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage