• 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 
  • 相关阅读:
    自定义view的一些问题
    爬取基金持有股票并存进数据库
    python读取配置文件
    Linux防火墙
    解决vue微信浏览器H5页面ajax请求后无法播放问题
    解决微信浏览器页面超出一块儿问题
    iOS Safari浏览器上iframe overflow: scroll元素无法滑动bug解决方法整理
    vue html2canvas 实现截图功能
    解决html2canvas截图生成的图片偏移不完整
    使用Hilo做H5接金币接红包小游戏
  • 原文地址:https://www.cnblogs.com/puluotiya/p/4853114.html
Copyright © 2020-2023  润新知