HTML小白初步学习教程10-职坐标

HTML小白初步学习教程10

沉沙 2018-10-31 来源：阅读 1647 评论 0

摘要：本篇教程探讨了HTML小白初步学习教程10，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML小白初步学习教程10，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

今天学习多媒体的编写

首先是飘动文字，主要由以下属性：飘动方向、速度、范围、次数、方式、留白区（vspace hspace）
复制代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="Generator" content="EditPlus®">
 6 <title>文字滚动</title>
 7 </head>
 8 <body>
 9 
10 <marquee behavior="alternate" scrollamount="44" bgcolor="#21B710">
11 弹幕党飘过~（加快了速度）
12 </marquee>
13 
14 
15 <marquee direction="right" behavior="scroll" scrolldelay="200" bgcolor="#0B6A1E" width="288">
16 弹幕党飘过~（带延迟）
17 </marquee>
18    间隔以查看v/h+space的效果   
19 <center>
20 <marquee direction="down" behavior="slide" bgcolor="#D4E866" hspace="80" vspace="100" >
21 落木潇潇下一次
22 </marquee>
23    间隔以查看v/h+space的效果   
24 <marquee direction="up" loop="3" height="323" bgcolor="#150BF2">
25 太阳升起三次
26 </marquee>
27 </center>
28 </body>
29 </html>
30

复制代码

效果图（动图的话，还是得自己打开看）：

image

除了滚动文字，还可以添加背景音乐：

<body>
<bgsound loop="3" src="路径/一笑天涯.mp3">
..
</body>

添加多媒体文件，基本语法格式：

<embed src=”media_filepath width=””height=””autostart=”true/false”></embed>

embed是针对非IE的浏览器的媒体播放器

一般在IE中用的是object标签。但非IE（如火狐、chrome）是不支持object的。
所以，常会看到object与embed同时出现，为的就是兼容不同的浏览器。

video是html5出的一种新标准，但并不是所有的浏览器都支持。

//www.w3school.com.cn/html5/html_5_video.asp此链接是video在不同浏览器中所支持样表

复制代码

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>多媒体播放</title>
 6 </head>
 7 <body>
 8 <hr color="#DD2629">
 9 
10 <embed type="audio/midi" hidden="false" loop="false" autostart="true" controls="ImageWindow" maxwidth="500" src="music/一笑天涯.mp3"></embed>
11 <hr color="#2C24D3">
12 <embed src="video/Frozen.Fever.avi" width="600" height="480" autostart="false"></embed>
13 </body>
14 </html>
15

复制代码

另附一个很厉害的链接：

//www.ynpxrz.com/n697858c2022.aspx

内容如下：

下面谈谈本人在html中插入音频文件，经过我的本地测试总结的一些问题(播放mp3文件)：

 <embed type="audio/mp3" src="" autostart=true loop=false></embed>

问题：IE8上正常（通过media player插件来播放）但在IE6和IE7上不会播放

Firefox上要安装QuickTime插件才能播放

Chrome通过将其转化成html5上的<vidio>标签播放，能播放但会使整个屏幕蓝屏

Opera不会自动播放

 <embed type="audio/midi" src="" autostart=true loop=false></embed>

问题：IE6,IE7上不会正常播放，IE8正常

Firefox上正常

Chrome上要求肮脏QuickTime插件才能正常播放

Opera不会自动播放

 <object data="" />

问题：在IE6,7上不能播放，IE8会弹出“非正常使用的Articx”等字样的提示

Firefox上正常

Chrome上正常

Opera不支持

 <audio src="" type="audio/mp3" />

问题：html5标签仅Chrome支持

 代码如下:

<audio autoplay>

<source src="" type="audio/mp3" />

<embed src="" type="audio/mp3"/>

</audio>

问题：IE6,IE7不支持，其余浏览器均支持，Opera不能自动播放

 <embed src=""><noembed><bgsound src=""></noembed>

问题：IE6,IE7均不支持，其余浏览器均支持，Opera不能自动播放

综合以上本人采取了一下方式（jquery下执行）：

代码如下:
复制代码

 1 if(navigator.userAgent.indexOf("Chrome") > -1){
 2
 3 如果是Chrome：
 4
 5 <audio src="" type="audio/mp3" autoplay=”autoplay” hidden="true"></audio>
 6
 7 }else if（navigator.userAgent.indexOf("Firefox")!=-1）{
 8
 9 如果是Firefox：
10
11 <embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed>
12
13 }else if（navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all）{
14
15 如果是IE(6,7,8):
16
17 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="" /></object>
18
19 }else if（navigator.appName.indexOf("Opera")!=-1）{
20
21 如果是Oprea：
22
23 <embed src="" type="audio/mpeg" loop="false"></embed>
24
25 }else{
26
27 <embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed>
28
29 }
30
31 或
32
33 代码如下:
34
35 var ua = navigator.userAgent.toLowerCase();
36
37 if(ua.match(/msie ([\d.]+)/)){
38
39 jQuery('#__alert_sound').html('<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="/sounds/alert/1.mp3" /></object>');
40
41 }
42
43 else if(ua.match(/firefox\/([\d.]+)/)){
44
45 jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
46
47 }
48
49 else if(ua.match(/chrome\/([\d.]+)/)){
50
51 jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay=”autoplay” hidden="true"></audio>');
52
53 }
54
55 else if(ua.match(/opera.([\d.]+)/)){
56
57 jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" hidden="true" loop="false"><noembed><bgsounds src="/sounds/alert/1.mp3"></noembed>');
58
59 }
60
61 else if(ua.match(/version\/([\d.]+).*safari/)){
62
63 jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay=”autoplay” hidden="true"></audio>');
64
65 }
66
67 else {
68
69 jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
70
71 }
72