• 技术文章 >web前端 >html教程

    html怎么添加音乐mp3

    醉折花枝作酒筹醉折花枝作酒筹2021-06-04 13:38:09原创214

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

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

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

    语法:

    embed src=url

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

    示例:

    代码如下:

    <embed src="your.mid">

    二、属性设置

    1、自动播放:

    语法:autostart=true、false

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

    示例:

    代码如下:

    <embed src="your.mid" autostart=true>
    <embed src="your.mid" autostart=false>

    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>

    3、面板显示:

    语法:hidden=ture、no

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

    示例:

    代码如下:

    <embed src="your.mid" hidden=ture>
     <embed src="your.mid" hidden=no>

    4、开始时间:

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

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

    示例:

    代码如下:

    <embed src="your.mid" starttime="00:10">

    5、音量大小:

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

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

    示例:

    代码如下:

    <embed src="your.mid" volume="10">

    6、容器属性:

    语法:height=# width=#

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

    height:控制面板的高度;
     width:控制面板的宽度。

    示例:

    代码如下:

    <embed src="your.mid" height=200 width=200>

    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>

    8、外观设置:

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

    示例:

    代码如下:

    <embed src="your.mid" controls=smallconsole>
     <embed src="your.mid" controls=volumelever>

    9、说明文字:

    语法:title=#

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

    示例:

    代码如下:

    <embed src="your.mid" title="第一首歌">

    扩展资料:

    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的<video>方案。现在我们来总结一下兼容性:

    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='video/webm; codecs="vp8.0, vorbis"'>
            <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
            <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
            <p>This is fallback content</p>
    </video>

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

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

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

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

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

    推荐学习:html视频教程

    以上就是html怎么添加音乐mp3的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html
    上一篇:如何用HTML显示分割 下一篇:click在html中用法是什么
    第16期线上培训班

    相关文章推荐

    • html怎么隐藏播放器• html怎么设置select的值• html行内样式字号怎么写• HTML如何实现点击button页面跳转• 如何用HTML显示分割

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网