Posted on 29-01-2015
Filed Under (技术) by waterlin

一直以来对 HTTP 方式观看视频的技术不是太了解,最近恶补了一些知识,整理一下笔记,备忘一下。本篇主要谈谈使用 Adobe Flash Media Server 4.5 来配置一个基本的网页视频服务站点的概念及步骤。

一些基础的知识

与 Flash 有关的一些名词概念

FMS: Flash Media Server,Flash多媒体服务器,用来对音频和视频进行流媒体服务的服务器软件。

SWF: small web format,就是 flash 动画文件。

FLV: Flash Video,用来通过 Flash 播放视频的文件格式,可以包含在 SWF 中。在互联网上,这个是事实上的基于 Web 的视频服务的传输标准,例如 Youtube 之类的厂商都是用这个格式来进行基于 Web 的在线视频点播。FLV 文件里对视频和音频内容的编码方法和 SWF 是一样的。从 Adobe Flash Player version 6 开始支持 FLV 格式。

F4V: 与 FLV 相平行的一种格式,为了封装 H.264 和 AAC 的音视频内容,从 Flash Player 9 update 3 开始支持这种格式。

备注:在 Windows 上可以通过 Flash Player 来播放 FLV 和 F4V 格式的视频,在 Web 浏览器里通过安装 Flash Player 插件来实现对这类视频的播放。

FLA: SWF 的源代码文件,可以使用编辑器打开这个文件进行修改,再导出新的 SWF 文件。

f4m: 清单文件,在使用 Web 浏览器来进行视频浏览时,需要有一个清单文件来适配码率以便选择合适的文件,就是通过这个清单来做的。

Flash Professional: 用来制作 SWF 的专业工具。

VOD: Video on Demond,请求视频服务。在 FMS 安装目录下的 vod 目录,有如下的使用特例:

The VOD service enables you to stream video and audio files through the server without writing any application code or configuring the server. You can simply point the Flash FLVPlayback component or a Flash video object to a file in this folder and the file will play—as long as it is an MP4, F4V, FLV, or MP3 file.

Flash 视频服务的基本类型

总体来说,Flash 视频的使用方式有两种,一种是客户端的模式,通过使用 RTMP 协议;另一种方式是使用 HTTP 的方式,通过网页来观看视频。在这两种方式中,SWF 都是客户端,FMS 都是服务器。

使用 RTMP 的方式来观看视频

最基本的配置步骤:

  1. 正常安装 FMS 4.5;
  2. 打开安装文件夹的这个路径:

    把示例的 flv 文件扔进去,或者直接使用该目录下面已有的测试文件。

  3. 直接打开 VLC 播放器,使用如下的地址来进行播放了:

    或是

对于以 flv 为后缀的文件,可以不使用后缀。但是这样播放有一个问题,没有办法快进与快退。

使用这种方式来播放,可以简单地测试一下服务器是否正常。

另外,使用 Flash Media Server,还可以直接直播摄像头的视频。大体上是三个步骤:

  1. 使用 Flash Media Live Encoder 对摄像头的数据进行压缩;
  2. 使用 Flash Media Server 创建一个直播流;
  3. 使用视频播放器来打开这个地址。

使用 HTTP 的方式来观看视频

如果使用 HTTP 的方式来传输视频,最基本的原理在这里讲得很清楚了,引用里面比较经典的一段话:

HDS和Pete的想法又有什么关联呢?HDS可能就是由你伴随Flash Media Server (FMS)一同安装的Apache模块而来的。在这种情况下,FMS扮演着打包机的角色,制造内容片断,由Apache通过HTTP传输到Flash兼容的视频播放器。为了解决Sam所提出的反对意见,与F4M扩展一起,另外的一个清单文件也是通过同样的一个过程创建出来的。从根本上说,所需视频文件首先使用F4F扩展软件切割成若干片段,作为片段文件。清单文件中包含了视频的一些基本信息,包括每一个片段文件的位置以及其中最为重要的信息——这些片段传输到用户设备上的顺序。

对于具体的协议来说,可以使用 PD, HLS, HDS 这三种中的一个,这三种协议的基本含义:

PD: HTTP progressive download,在终端用户上缓存多媒体文件从而实现边下载边播放的流媒体技术,这是很多视频流媒体服务使用方法的统称。

HLS: HTTP Live Streaming,苹果公司的基于 Web 的流媒体服务协议,先把视频切成若干个小片,然后使用 HTTP 协议下载后进行播放,从而实现基于 Web 的视频播放技术。这个协议最大的优势是只使用了 HTTP 协议,所以一般来讲,只要能正常上网的地方就可以使用该协议进行视频观看服务。

HDS: HTTP Dynamic Streaming

对于 FMS 的配置来讲,如果需要跑起基本的视频服务,还是比较简单的,根据上面的教程来配置即可。这几者之间的优缺点下次再作详细的介绍。

(0) Comments    Read More   
Posted on 13-02-2014
Filed Under (技术) by waterlin

最近写了一些 HTML 的东西,有两个经验作为笔记记录一下,免得以后碰到了,又抓瞎了。

背景图片上再画一些图片元素

如果网页上已经有了一个背景图片,这时还希望在这个背景图片上加上网格点或是其它有一定透明度的背景图片,甚至于更复杂一点的情况,再平铺的背景图片可能只需要覆盖一部分网页,比如说除了页脚的部分。

需要做出这种效果,最好的办法,就是把你需要覆盖的部分网页再用一个 div 框架组合起来,然后设置这个 div 框架的背景图片为需要展示的网格或是其它内容。同时注意,关键的一步是,你需要设置这个 div 的 padding(上下左右或是其中的某个部分)值,使得 div 框架覆盖到你需要覆盖的部分。

至于这个尺寸的计算,基本上只能使用 Javascript 来根据浏览器和文档的高度、宽度,根据页面里已经有的 DOM 元素(比如说页脚)尺寸来计算。

让 div 紧贴底部还能自动拉伸

假设一个 div 内部有三个 div,自动从上到下排列。如果我们想让内部的三个 div 还是这个顺序排列,但让它靠在下面,让其上面留有空隙。或是反过来,让这三个 div 靠在上面,底下留一部分空隙出来。

这两种效果都可以用 padding 来解决,其实,大部分的 div 排版问题,都可以使用 padding 来解决。

(0) Comments    Read More