首页 > 编程技术 > html

网页播放技术的基本原理

发布时间:2016-9-20 19:03

    网页播放技术,顾名思义,就是在网页上实现播放流媒体或本地媒体的一种应用。制作网页播放器,并不是真的在网页上“发明”了一种或几种播放器。目前所有的网页播放器基本上仍然都是用户本地的 Windows Media Player (简称 WMP)和 Real 在发挥实质作用,也就是说,如果用户本地没有安装 WMP 或 Real 这两种真正的播放器软体,“网页播放”一切都是空谈。说到这里,我们可以对“网页播放”技术下一个科学的定义了。

    所谓网页播放技术,就是以网页代码的形式利用 WMP 或 Real 播放器本身的一些函数、事件和方法,如暂停、快进、全屏等等,在网页上实现对媒体文件的一种播放控制。网页播放器功能的多少,取决于对这些函数、事件和方法利用的多少。好的网页播放器就好象把真的 WMP 或 Real 搬到了网页上一样,原因就是这种网页播放器将用户本地的 WMP 或 Real 进行了淋漓尽致地控制。典型代表就是谱乐制作的 BBSVisual For Lrc 。大家先可以前往 http://aboutplayer.com/bbs/cbo.htm 处观摩演示(下载请在百度或 Google 里输入 bbsvisual 即可),至于详细的过程演绎,谱乐会在“进阶系列”之中逐步与大家共同一一探讨。

    网页播放器的表现形式大致有两大类。

    一类我们称她为简单型,特点是功能简单,单曲播放。简单型不需要什么复杂的代码与语言,BBS惯用的 UBB 代码中的媒体播放就属于此类。效果如下。

    一类我们称之为扩展型,特点是功能齐全,连续播放 。 BBSVisual For Lrc 就属于这一类。扩展型又可分两小类,一类是普通的网页形式,如 BBSVisual For Lrc ,一类是 Flash 的 SWF 文件格式,如 http://aboutplayer.com/bbs/flash.asp

<

在Web页中嵌入Media Player的方法比较简单,只要用HTML中的<Object></Object>可以了,如下所示。
<OBJECT ID="WMPlay" WIDTH=320 HEIGHT=240
CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/
nsmp2inf.cab#Version=6,4,5,715"
STANDBY="Loading Microsoft? Windows Media? Player components..."
TYPE="application/x-oleobject">
</OBJECT>

其中ID是对象的名称,当用户在JavaScript要对Media Player进行控制时可以用该对象的名称WMPlay进行访问。CODEBASE指明当用户的浏览器中没有安装Player控件时可以从该URL指定的位置去获取。
当然在建立Player对象时也可以用<PARAM >来为其指定参数。如下所示:
<PARAM NAME="FileName" VALUE="C:ASFRootWelcome.asf">
<PARAM NAME="ShowControls" VALUE="False">
<PARAM NAME="AutoRewind" VALUE="True">
<PARAM NAME="AutoStart" VALUE="False">

其中"FileName"参数表示Media Player要播放的文件活或流。"ShowControls"表示在播放时是否显示控制条。Media Player的参数很多,我们在此不再一一详述。读者如果需要了解更详细的内容可以参考Media Player SDK中的相关部分。
如果用户需要对Media Player进行控制可以用JavaScript进行控制。


在这个例子中,Media Player嵌入在Web页面中,在Media Player右边有一些按钮,利用这些按钮用户可以控制Media Player的播放活动。这些按钮的HTML代码如下:
<form name="myform">
<input type="button" width="15" value="No Controls " name="NoControls"
OnClick="controlType(false)">
<input type="button" width="15" value="All Controls" name="Full"
Onclick="controlType(true)">
<input type="button" width="15" value=" Small " name="Small"
OnClick="displaySize(1)">
<input type="button" value=" Large " name="Large"
Onclick="displaySize(2)">
<input type="button" width="15" value=" Normal " name="Normal"
Onclick="displaySize(0)">
<input type="button" width="15" value=" Play " name="Play"
Onclick="PlayClick()">
<input type="button" width="15" value=" Stop " name="Stop"
Onclick="StopClick()">
</form>

相应的JavaScript代码为:
<script language="javascript">
<!--
var g_Browser = navigator.appName;
function controlType (setting)
{
if (g_Browser == "Netscape")
document.WMPlay.SetShowControls(setting);
else
document.WMPlay.ShowControls = setting;
}

<

  1、显示QQ在线状态

<!-- QQ在线状态显示 -->
<a target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=你的qq号码&Exe=QQ&Site=Simplelife&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:你的qq号码:4 alt="点击发送消息给我"></a>

  2、加入Google搜索工具

添加Google搜索工具,具体代码如下:
<input type=text id=txtQ size=10>
<img" width=100% src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle" onclick="self.open('http://www.google.com/search?&hl=zh-CN&q='+txtQ.value,'goog');"><br>

也可使用Google站点提供的代码:

<!-- SiteSearch Google -->
<FORM method=GET action="http://www.google.com/search">
<INPUT TYPE=hidden name=ie value=GB2312>
<INPUT TYPE=hidden name=oe value=GB2312>
<INPUT TYPE=hidden name="hl" value="zh-CN">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google"></A>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=submit name=btnG VALUE="Google Search">
<font size=-1>
<INPUT TYPE=hidden name=domains value="YOUR DOMAIN NAME"><br>
<INPUT TYPE=radio name=sitesearch value=""> 搜索WWW
<INPUT TYPE=radio name=sitesearch value="http:///" checked>网页教学网<br>
</font>
</td></tr></TABLE>
</FORM>
<!-- SiteSearch Google -->

  3、添加“天气预报”功能

<p><b>今日天气</b><br>
<center><iframe width=157 height=240 frameborder=0 scrolling=NO" width=100% src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe></center>

  4、增加flash精美时钟

  发现了很多绚丽的FLASH钟表,免费,没有广告的可以使用,颜色也可选择,安装也方便。

  你可以预览后选择自己喜欢的。

刻度时钟:
<EMBED SRC=http://www.butabon.com/Clock/clock_038.swf WIDTH=150 HEIGHT

<

  前段时间在技术区看到有朋友提出要做个配色方面的教程,颜色方面自己过去只学过一些水粉和国画,稍微具备点颜色搭配能力,在者后来学习的漫画几乎没有用到颜色,全是黑白线稿,到现在做的鼠绘,配色也都是摸着石头过河,今天在网络上搜集了一些资料仅提供给大家参考,毕竟目前关于动画制作配色方面的教程真是少之又少啊,不专业学过还真不晓得该说些什么呢,让大家见笑了。

  这里先根据我朋友LONE在闪客皇朝(http://www.flashking.cn)所做的配色教程开始讲。

  依次演示:

  1、紫色系与黄色系

  说明:紫色占大部分画面,添加黄色就占少量画面,这样看上去会比较协调。相反,如果黄色占了大部分的画面,紫色就必须占少量画面。

  2、红色系与绿色系


  3、红色系与黄色系

使用说明:

当html代码为

<font face='Webdings'>!</font>时,实际显示:!

<font face='Webdings'>3</font>时,实际显示:3

<font face='Wingdings'>3</font>时,实际显示:3

<font face='Wingdings 2'>3</font>时,实际显示:3

<font face='Wingdings 3'>3</font>时,实际显示:3

...

对照着左表显示你想要显示的字符吧:)

字体 Webdings Wingdings Wingdings 2 Wingdings 3
! ! ! ! !
" " " " "
# # # # #
$ $ $ $ $
% % % % %
& & & & &
' ' ' ' '
<
标签:[!--infotagslink--]