网页播放技术的双簧演绎

 更新时间:2016年9月20日 19:03  点击:1257
 

    许多朋友将音乐文件改编成 Flash 动画,满足了自己自由发挥和想象创造的成就感。但是 Flash 文件需要 Flash 专用播放器来播放,那么在网页上如何实现 Flash 媒体文件的播放呢?当然可以象 WMP 及 Real 一样引用 Flash 播放器控件代码来加以实现,但是一个网页在引用了 WMP 和Real 播放器控件的情况下,又再引用 Flash 播放器控件,那将是非常的占用系统资源和影响电脑运行速度的,甚至造成死机。为此,谱乐探索出了一种 WMP 在网页上实现播放 Flash 媒体文件的重要方法。请点播放键观看效果。

    在视频区域单击鼠标右键,你就会发现媒体文件为 Flash 格式(下同)。

    实现方法谱乐将在谱乐专栏以后的专题中具体讲解,请大家密切关注,多多支持。

    大家知道,Flash 也是网页的一种表现形式,许多 Flash 高手甚至干脆就用 Flash 来表现整个网站。谱乐这里想说的是,Flash 也可表现为播放器形式,用来播放 MP3 音频文件和 Flv、Swf 视频文件。这类播放器也是网页播放器的一种。

    Flv 视频播放器

    媒体文件格式为 Flv 格式。

    MP3 音频播放器

   WMP 与 Real 既有各自专用的歌词表现形式,又有两者都通用的歌词表现形式。WMP 专用的歌词表现形式是通过 *.SMI 文件实现的,Real 专用的歌词表现形式是通过 *.RT 文件实现的,两者通用的歌词表现形式为 *.LRC 文件。

    SMI 歌词文件

    请点播放键观看效果(有个缓冲过程,大家要等待片刻)。SMI 文件有专门的制作软件,非常方便,方法后面详谈。可实现歌词的单行、多行及卡拉OK等特殊效果。SMI 歌词实际是利用 WMP 的 Closed Caption 属性实现的。

    代码如下:

    <OBJECT ID="aboutplayer" CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height=150 width=200><param name="UIMode" value="none"></OBJECT>
    <table height=100 width=200 border=3 bordercolor=blue>
        <tr align=center>
            <td bgcolor=white><font color=olive size=2>SMI 演示</font></td>
        </tr>
        <tr height=75>
            <td bgcolor="green"><div id=CapText></div></td>
        </tr>
    </table>
    <table width=200>
        <tr>
            <td align=center><INPUT TYPE="BUTTON" VALUE="Play" OnClick="Play()"></td>
            <td align=center><INPUT TYPE="BUTTON" VALUE="Stop" OnClick="Stop()"></td>
        </tr>
    </table>
<SCRIPT>
function Play()
{
aboutplayer.closedCaption.CaptioningID = "CapText";
aboutplayer.closedCaption.SAMIFileName = "http://lrc.aboutplayer.com/goodbye.smi";
aboutplayer.URL = "http://www.shijiren.net/wma/g00146001/g0014600101.wma";
aboutplayer.controls.play();
}
function Stop()
{
aboutplayer.controls.stop();
}
</SCRIPT>

    问题的关键就是下面三句:

< 我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+ CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。
1.初级改善
为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型(Strict )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型(Frameset )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:

<html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>
正确的写法是:

<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。
为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
正确的写法:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="UNC公司标志,点击返回首页">
给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height="100",而不能是height=100。

关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。

  已有的网站是GB2312编码?看到UTF-8编码的优点有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  GB2312是简体中文的编码,所以当文章/网页中包含繁体中文、日文、韩文时,这些内容可能无法被正确编码。

  有一种比GB2312编码略广的编码,就是GBK,它包含了对繁体中文的编码,但对他国非拉丁字母语言还是有问题。

  UTF-8编码是一种目前广泛应用于网页的编码,它其实是一种Unicode编码,即致力于把全球所有语言纳入一个统一的编码。目前UTF-8已经把几种重要的亚洲语言纳入,包括简繁中文和日韩文字。采用UTF-8编码的网页某种意义上说就是“与国际接轨”了。此外,很多手机终端都使用UTF-8编码,如果网站考虑开发WAP界面而网站数据本身又是UTF-8编码,就省却了开发WAP界面时的转码问题。

  已有的网站是GB2312编码?看到UTF-8编码有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  在转换前,必须考虑网站是否有必要转码。我提供几点供参考:
  1、网站面向的对象,是局限一小圈子的人,还是中国大陆,还是包括港澳台在内的整个中国甚至全世界。

  2、在GB2312编码中一个汉字占2个字节,而在UTF-8中,一个汉字要占3个字节,这种空间增加的代价是否值得。

  3、在旧有的数据库系统上(例如MySQL 4.0及以前的版本)可能没有内置对UTF-8的支持,虽然本文有办法解决,但不排除还潜在一些小问题。

  4、网页文件转为UTF-8编码后是否方便编辑。我目前用ZDE4,设置好后对UTF-8编码支持非常好。设置方法是在菜单Tools->Preferences中,点Editing标签,把Encoding改为UTF-8即可。

考虑好决定转码以后,就可以开始了。本文仅以php 4.0~5.0 + MySQL 3.23~4.0为例。

  首先对准备转码的数据库,为其建立一个新的数据库及相应表结构用于存储转码结果。如果在没有内置支持UTF-8的数据库系统操作,则建议把用于存储中文的CHAR、VARCHAR、TEXT字段分别改为BINARY、VARBINARY、BLOB,虽然我试验过不改也没有问题。

  接着在操作系统命令行下执行如下命令导出原有的数据库(其中{dbname}用数据库名替换,{path1}用一个已存在的临时路径替换,导出的数据将会存放于此):
mysqldump --opt --comments=0 -n -t --fields-terminated-by=, --fields-escaped-by= {dbname} -uroot -p --tab={path1}

  上述命令中的用户root也可换为其它用户,但须保证有dump的权限。用转码工具,例如ConvertZ,把上面{path1}中的全部文件转为UTF-8编码。注意要关闭BOM选项。假设转码后的文件保存在路径{path2}。

  用有LOAD DATA权限的用户连接MySQL服务器,用use命令选择刚才新建的数据库,然后对每个表{table_name}执行如下命令:
LOAD DATA INFILE '{path2}{table_name}.txt' INTO TABLE {table_name} FIELDS TERMINATED BY ',' ESCAPED BY '';

  提示:表比较多的时候可以写个小程序生成一个SQL脚本。

  执行上述命令时可能会出现警告(Warnings),请留意Warning的这些行(Row),可能有些数据并没有转换成功,例如字段错位。

  根据经验,此种情况多数是由数据结尾的字节的16进制码大于7F所致。通常这些行数量是比较少的,可以手工修正这些行。

  至此数据库的转码就完成了。清理原数据库和转码过程的临时文件这里就不详述了。

  对网页转码:同样用转码工具把网站所有网页转为UTF-8编码。

  然后打开包含头部的网页文件/网页模版文件,把这样的行:

  替换为这样:

  据我的经验,如果网页采用css样式表控制网页样式,如果在css的body标签中设置了字体,那么在原来的gb2312编码下,该字体设置可以继承到intput和textarea中,但转为utf-8后,需要在input和textarea标签中重新设置字体。



  近来,网络上的SQL Injection 漏洞利用攻击,JS脚本,HTML脚本攻击似乎逾演逾烈.陆续的很多站点都被此类攻击所困扰,并非像主机漏洞那样可以当即修复,来自于WEB的攻击方式使我们在防范或者是修复上都带来了很大的不便。HOOO…… 一个站长最大的痛苦莫过于此.自己的密码如何如何强壮却始终被攻击者得到,但如何才能做到真正意义上的安全呢?第一,别把密码和你的生活联系起来;第二,Supermaster的PWD最好只有你自己知道;第三,绝对要完善好你的网站程序。然而怎样才能完善,这将是我们此文的最终目的。

  安全防护,如何做到安全防护?想要防护就要知道对方是如何进行攻击。有很多文章都在写如何攻下某站点,其实其攻击的途径也不过是以下几种:

  1. 简单的脚本攻击

  此类攻击应该属于无聊捣乱吧。比如****:alert(); </table>等等,由于程序上过滤的不严密,使攻击者既得不到什么可用的,但又使的他可以进行捣乱的目的。以目前很多站点的免费服务,或者是自身站点的程序上也是有过滤不严密的问题。

  2. 危险的脚本攻击

  这类脚本攻击已经过度到可以窃取管理员或者是其他用户信息的程度上了。比如大家都知道的cookies窃取,利用脚本对客户端进行本地的写操作等等。

  3. Sql Injection 漏洞攻击

  可以说,这个攻击方式是从动网论坛和BBSXP开始的。利用SQL特殊字符过滤的不严密,而对数据库进行跨表查询的攻击。比如:

  http://127.0.0.1/forum/showuser.asp?id=999 and 1=1

  http://127.0.0.1/forum/showuser.asp?id=999 and 1=2

  http://127.0.0.1/forum/showuser.asp?id=999 and 0<>(select count(*) from admin)

  http://127.0.0.1/forum/showuser.asp?id=999’; declare @a sysname set @a='xp_'+ 'cmdshell' exec @a 'dir c:'---&aid=9

  得到了管理员的密码也就意味着已经控制的整站,虽然不一定能得到主机的权限,但也为这一步做了很大的铺垫。类似的SQL Injection攻击的方式方法很多,对不同的文件过滤不严密所采取的查询方式也不同。所以说想做好一个完整的字符过滤程序不下一凡功夫是不可能的。

  4. 远程注入攻击

  某站点的所谓的过滤只是在提交表格页上进行简单的JS过滤。对于一般的用户来说,你大可不必防范;对早有预谋的攻击者来说,这样的过滤似乎根本没作用。我们常说的POST攻击就是其中一例。通过远程提交非法的信息以达到攻击目的。

  通过上面的攻击方法的介绍,我们大致的了解了攻击者的攻击途径,下面我们就开始重点的介绍,如何有效的防范脚本攻击!

  让我们还是从最简单的开始:

  l 防范脚本攻击

  JS脚本 和HTML脚本攻击的防范其实很简单:server.HTMLEncode(Str)完事。当然你还不要大叫,怎么可能?你让我把全站类似<%=uid%>都加过滤我还不累死?为了方便的过滤,我们只需要将HTML脚本和JS脚本中的几个关键字符过滤掉就可以了:程序体(1)如下:

  ‘以下是过滤函数

  <%

  function CHK(fqyString)

  fqyString = replace(fqyString, ">", ">")

  fqyString = replace(fqyString, "<", "<")

  fqyString = replace(fqyString, "&#", "&")

  fqyString = Replace(fqyString, CHR(32), " ")

  fqyString = Replace(fqyString, CHR(9), " ")

  fqyString = Replace(fqyString, CHR(34), """)

SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • vue+video.js实现视频播放列表

    这篇文章主要为大家详细介绍了vue+video.js实现视频播放列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-29
  • vue项目中播放rtmp视频文件流的方法

    这篇文章主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-17
  • 详解Howler.js Web音频播放终极解决方案

    这篇文章主要介绍了详解Howler.js Web音频播放终极解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-24
  • Vue+node实现音频录制播放功能

    这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-25
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • 基于jQuery实现音乐播放试听列表

    这篇文章主要介绍了基于jQuery实现音乐播放试听列表的相关资料,需要的朋友可以参考下...2016-04-17
  • html5中嵌入视频自动播放的问题解决

    这篇文章主要介绍了html5中嵌入视频自动播放的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • Android小程序实现音乐播放列表

    这篇文章主要为大家详细介绍了Android小程序实现音乐播放列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-05-23