HTML初步学习10

今天学习多媒体的编写

首先是飘动文字，主要由以下属性：飘动方向、速度、范围、次数、方式、留白区（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>&nbsp;&nbsp; 间隔以查看v/h+space的效果 &nbsp;&nbsp;
 19   <center>
 20   <marquee  direction="down"  behavior="slide" bgcolor="#D4E866"  hspace="80" vspace="100" >
 21   	<font size="6" color="#12DE32">落木潇潇下一次</font>
 22   </marquee>
 23   &nbsp;&nbsp; 间隔以查看v/h+space的效果 &nbsp;&nbsp;
 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
滚动文字

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

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出的一种新标准，但并不是所有的浏览器都支持。
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
posted @ 2015-10-03 10:30  普洛提亚  阅读(247)  评论(0)  编辑  收藏  举报