您的位置：首页 > 编程技术 > html  >  网页播放技术的基本原理

网页播放技术的基本原理

 更新时间：2016年9月20日 19:03  点击：1399
    网页播放技术，顾名思义，就是在网页上实现播放流媒体或本地媒体的一种应用。制作网页播放器，并不是真的在网页上“发明”了一种或几种播放器。目前所有的网页播放器基本上仍然都是用户本地的 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 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 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--]

相关文章

  • 如何使用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

  • PHP的运行机制与原理(底层)

    说到php的运行机制还要先给大家介绍php的模块，PHP总共有三个模块：内核、Zend引擎、以及扩展层；PHP内核用来处理请求、文件流、错误处理等相关操作；Zend引擎（ZE）用以将源文件转换成机器语言，然后在虚拟机上运行它；扩展层是一组...2015-11-24

  • 详解Howler.js Web音频播放终极解决方案

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

  • vue项目中播放rtmp视频文件流的方法

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

  • java中Base64编码原理实例讲解

    这篇文章主要介绍了java中Base64编码原理实例讲解，文章讲解的很清晰，有对于这方面不太懂的同学可以研究下...2021-02-10

  • Vue中key的作用及原理详解

    本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-13

  • Vue+node实现音频录制播放功能

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

  • C#实现Winform中打开网页页面的方法

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

  • C# URL短地址压缩算法及短网址原理解析

    这篇文章主要介绍了C# URL短地址压缩算法及短网址原理解析,本文重点给出了算法代码,需要的朋友可以参考下...2020-06-25

  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05

  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01

  • 在Visual Studio 中使用git及Git概念

    Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理，是目前使用范围最广的版本管理工具，本文重点给大家介绍在Visual Studio 中使用git及git的工作原理，感兴趣的朋友一起看看吧...2021-05-19

  • Python基础之Socket通信原理

    这篇文章主要介绍了Python基础之Socket通信原理,文中有非常详细的代码示例,对正在学习python基础的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-22

  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

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

  • 分析网页的几种加密技术

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