今天学习多媒体的编写
首先是飘动文字,主要由以下属性:飘动方向、速度、范围、次数、方式、留白区(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 <font size="6" color="#C8C1C1">弹幕党飘过~(加快了速度)</font> 12 </marquee> 13 <br/><br/> 14 <!--滚动延迟属性:毫秒为单位--> 15 <marquee direction="right" behavior="scroll" scrolldelay="200" bgcolor="#0B6A1E" width="288"> 16 <font size="6" color="#C8C1C1">弹幕党飘过~(带延迟)</font> 17 </marquee> 18 <p> 间隔以查看v/h+space的效果 19 <center> 20 <marquee direction="down" behavior="slide" bgcolor="#D4E866" hspace="80" vspace="100" > 21 <font size="6" color="#12DE32">落木潇潇下一次</font> 22 </marquee> 23 间隔以查看v/h+space的效果 24 <marquee direction="up" loop="3" height="323" bgcolor="#150BF2"> 25 <font size="6" color="#12DE32">太阳升起三次</font> 26 </marquee> 27 </center> 28 </body> 29 </html> 30
效果图(动图的话,还是得自己打开看):
除了滚动文字,还可以添加背景音乐:
<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出的一种新标准,但并不是所有的浏览器都支持。
http://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 <!--不定义type,就会出错--> 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
另附一个很厉害的链接:
http://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