Although I've been working on web sites since 1993, it's only been in the last year that I've started playing around with video on the Web on my own sites and on some of the sites I've designed. Now that standard web connections are faster than ever, video is more accessible than ever.
我从1993年开始设计网站，但直到去年才开始在自己的网站以及部分为用户设计的网站中增加视频内容。现在网络连接速度越来越快，设置视频内容的网站也越来越多。

The following article is an excerpt from the second edition of my book, Learning Web Design, which is aimed at people who are brand new to web design and production. This excerpt is intended to be a starting point for understanding the basics of web video and is by no means the final word. See the excellent resources at the end of this article for further reading.

这篇文章摘录自我编写的《学习网站设计》（第二版），主要针对刚开始学习网站设计的受众。这篇文章可以帮助初学者了解网站视频设计的基本知识，但并不是最终结论。下面介绍主要内容。

Video
视频

How did they get a little movie to play right on their page?
如何在网页中恰到好处地运用视频？

When you see a video playing right on a web page, chances are it's a QuickTime movie that has been placed on the page with an <object> tag (the World Wide Web Consortium's [W3C] preferred method) along with an <embed> tag (Apple's recommended method for Netscape and older browsers) as shown in Figure 22-4). This method is discussed in detail in the next section. In order for the movie to display on the web page, the QuickTime plug-in must be installed on the user's browser. Fortunately, this plug-in is included in current browsers' installation packages. For Windows users, code in the <object> tag automatically installs the player necessary for viewing the movie.

如果视频运用其当，那可能是利用<object>标签（W3C常用的方法）与<embed>标签（苹果公司推荐Netscape以及更老的浏览器用户使用的方法）设置了QuickTime电影，下一节我们会具体介绍这个方法。用户浏览器中只有安装QuickTime插件，才能收看电影，值得高兴的是，现在浏览器中包含这些插件。对Windows用户来说，<object>中的编码可以自动安装观看电影需要的播放器。

Figure 22-4. Use the <embed> tag to place a movie and its player right on the page like an image. Note that I've added 16 pixels to the actual movie height (120 pixels) to accommodate the player controls.

Figure 22-4. 利用<embed>标签设置电影与播放器，类似于设置图片。我在实际电影宽度（120像素）的基础上增加了16个像素，容纳播放器的控制器。

As an alternative, you can provide a link to the movie file and let the user download it whenever they want (Figure 22-5). When the movie downloads, it can be viewed in the browser window with the QuickTime plug-in or it can be played with another movie-playing helper application.

另外，你也可以提供电影链接，保证用户在需要时，可以进行下载（Figure 22-5）。电影下载时，保证用户可以在QuickTime插件或者其它电影播放程序的帮助下，在浏览器中观看电影。

TIP: When linking to an audio or video file, always provide the file size so users can make an informed decision about whether they want to commit to clicking the link.

提示：与音频或视频内容链接时，保证提供文尺寸，这样用户可以提前决定是否进行链接。

Figure 22-5. You can also simply link to a movie file. When the user clicks the link, the movie opens in whatever movie player the browser has configured.

Figure 22-5。可以与电影进行链接。用户点击链接后，电影可以在浏览器配置的任何播放器中播
放。

Using <object> and <embed>

利用<object> 与<embed>标签

To ensure that videos will play properly on all browsers, it is recommended that you place the movie on the page using both the <object> and <embed> tags. The standard, minimum code for doing this is as follows:

为保证视频可以在浏览器中播放，你可以利用<object> 与<embed>标签进行设置。使用方法如下：

If you look carefully, you will see that the basic directions are repeated in both the <object> tag and its parameters and the <embed> tag. Let's take a look at the minimal movie settings.

仔细观察，你会注意到<object>与<embed>标签中的参数用法重复。下面介绍设置最短视频的方法。

Player information
播放器信息

Both tags contain code that prompts the browser to download the player necessary for displaying the movie on the page. In the <object> tag, the classid and codebase attributes provide specific directions for automatically installing the required ActiveX element.

上述两个标签中包含允许浏览器下载电影播放器的编码。在<object>标签中，classid与codebase属性指示浏览器自动安装ActiveX元素。

In the <embed> tag, the pluginspage takes the user to a page where they can download the QuickTime player if it is not found by the browser.

在<embed>标签中，如果浏览器没有发现播放器，插件页面会引领用户进入下载 QuickTime播放器的页面。

The values of these attributes (shown in bold) must appear exactly as they are written here or they will not work.

这些属性值（黑体内容）必须这样呈现，不能更改，否则没有任何作用。

Source
位置

As for images, you must provide the source URL for the movie file in both tags. For the <object> tag, the url is provided within a parameter (<param name="src" value="moviefile.mov">). The <embed> tag uses the src attribute.

与设置图片相同，你需要为两个标签中的电影文本提供URL。<object>标签中的url会在参量中出现(<param name="src" value="moviefile.mov">)。<embed>标签使用src属性。

Dimensions
尺寸

The width and height attributes are required in both tags. In order for the controller (the strip at the bottom with the slider and play and pause buttons), you must add 16 pixels to the height of the movie. In the previous example, the original movie is 240 x 180 pixels, so I've set the width to 240 and the height to 196.

两个标签中需要设置宽度与高度属性。你需要在实际电影高度的基础上增加16像素，用来放置视频控制器（带有滑动条、播放键以及暂停键的区域，出现在底部）。在刚才的例子中，电影宽度为240x180 ，所以，我把宽度定为240，高度定为196。

Controller
控制器

You can decide whether you want the controller to display using the controller parameter and attribute. Setting the value to true makes it display; setting it to false hides it. Use the autoplay parameter and attribute to set whether the movie starts playing automatically when the page loads (true) or if the user needs to hit the Play button to start the movie (false).

你可以利用控制器参数、属性，来决定是否呈现控制器。参数值设置为“true”，呈现控制器；参数值设置为“false”，隐藏控制器。利用自动播放参数、属性，决定网页下载完成后，电影自动播放，还是用户点击播放键之后播放。

This is just the tip of the iceberg of controls for inline video using the <object> and <embed> tags. For a complete list, see Apple's tutorial for embedding Quicktime movies.

利用<object> 与<embed>标签，设置视频，还需要了解很多其它内容。你可以阅读苹果公司关于嵌入Quicktime movies的手册，获取更多信息。

Movie files
电影文件

Let's talk a little more about movie files. The QuickTime Movie format (.mov) is ideal for delivering movies over the Web because it is a highly condensed format supported on both PCs and Macs. Movies can also be saved in MPEG (.mpg or .mp2) format or as Windows-only AVI files (.avi).

这里，稍微介绍一下电影文件。QuickTime电影格式(.mov)适于利用在网站中，因为PC机与苹果机都支持这种高度压缩格式。当然，电影也可以保存为MPEG(.mpg or .mp2)或者AVI格式(.avi)。

Making movies is easier than ever with digital video cameras that can be plugged directly into your computer. You'll need to start with a video source (from your camera or videotape). You'll also need video-editing software, such as QuickTime (by Apple), Media Cleaner Pro (by Terran Interactive), Apple Final Cut Pro, or Adobe Premier if you want to go for professional-level editing (Adobe.com). If you work on a newer Macintosh, you can take advantage of Apple's iMovie technology, which puts basic movie-making abilities in the hands of consumers.

现在数码相机可以与计算机连接，制作视频就更简单。你需要具备视频资料、视频制作软件，软件包括：QuickTime（苹果机）、Media Cleaner Pro（Terran Interactive）、Apple Final Cut Pro或者Adobe Premier (Adobe.com)。如果拥有最新的Macintosh，你可以利用Apple's iMovie技术，允许网站消费者自己制作视频。

Because video and audio information can be huge, the trick to making web-appropriate movies is optimization--the frame rate, the image compression, and the sound compression (see Optimizing Video for the Web below). All video-editing packages provide the tools you need for compressing your video as small as possible.

由于视频与音频的文件尺寸大，我们必须对其进行优化——帧频、图像压缩率、声音压缩率（下面会介绍视频优化方法）。所有视频编辑器提供的压缩工具尺寸需要尽量小。

Streaming video
流式视频

Like audio, a video source can be streamed so that it starts playing quickly and continues playing as the data is transferred. The options for video are the same as for audio: RealMedia (.rm), Windows Streaming Media (.wm), and streaming QuickTime. For true streaming performance, the files must be served from a computer outfitted with the appropriate server software. See the companies' web sites, listed earlier in the Streaming audio section, for current information on streaming formats.

音频与视频内容可以流动，数据传送时，视频内容快速、不间断地播放。与音频相同，视频也有以下几种：RealMedia (.rm)、Windows Streaming Media (.wm)、以及 streaming QuickTime。流动视频只有在配备适当服务器的电脑中，才能播放。浏览网站，找出流动格式的信息。

Optimizing Video for the Web
优化网站视频

Most video editing tools offer automatic web video settings targeted at various Internet connection speeds. You may also want to experiment with these settings individually to find the quality that best suits your video.

大多数视频编辑工具提供针对不同网络链接速度的视频设置。你可以单独测试这些编辑工具，找出最适合自己需要的。

Frame size
框架尺寸

Common frame sizes for web video are 160 x 120 and 240 x 180. Some developers go as low as 120 x 90. It is not recommended that you use a frame size larger than 320 x 240 with current technology.

网站视频框架尺寸一般为：160x120、240x180。有些网站设计者会设置为120x90，在当前网络技术条件下，框架尺寸不应超过320x240。

Frame rate
帧频

Frame rate is the measure of number of frames per second (fps). Standard video is 30 fps. For the Web, a frame rate of 15 or 10 fps is more appropriate.

帧频就是指每秒的帧数(fps)，标准视频为30fps，15或10fps是比较合适网站的帧频。

Color bit depth
颜色位深

Reducing the number of colors from 24-bit to 8-bit will drastically reduce the size of your video, but will also sacrifice quality.

视频颜色由24位缩减为8位，会显著减小尺寸，但视频质量会变差。

Data rate
数据传输速率

This is the rate at which data must be transferred in order for the video to play back smoothly. Data rate is measured in kilobytes per second (Kbps). This is one of the most important settings for web video, particularly for streaming video, and it should be tailored to the targeted Internet connection speed. For 56 KB connections, aim for a data rate of 4 Kbps; 30 Kbps for DSL; and 50 Kbps for cable connections.

数据传输速率必须保证视频可以不间断播放，这个速率用每秒千字节（Kbps）来测量。对网站视频，尤其是流动视频来说，这是一项重要的设置。网络链接速度不同，这个速率也就不同。56KB的网络链接中，目标传输速率为4Kbps；利用DSL进行网络链接时，目标传输速率为30Kbps；利用电缆连接时，目标传输速率为50Kbps。

Compression scheme
压缩方案

Videos are compressed using compression and decompression algorithms (called codecs). There are many codecs available, but the best choices for web video are H.263 and the Sorenson Video codec, which can achieve very high image quality at lower data rates. Sorenson requires a high-performance processor for playback, so it may not work well on older computers. Sorenson 3 video is a later version which requires the latest hardware and software configurations for playback. As an alternative, the Cinepak codec is a good general-purpose codec that compresses reasonably well and is supported by older computer configurations.

视频可以通过压缩、解压法则（称为编码/解码器），改变尺寸。可供利用的codecs（编码/解码器）很多，但最好的两种是H.263与Sorenson Video codec，他们可以在较低的传输速率下，保证图像的高质量。由于Sorenson需要高性能的处理器，以达到重放的目的，所以它不适合老式计算机。Sorenson 3视频是一个较新的版本，需要配置最新的硬件与软件，才能达到重放的目的。你可以使用Cinepak，它可以适当压缩视频文件，并且可以在老式计算机中运用。

Quality
图像质量

You can set the overall quality of video to low, medium, or high. Medium is fine for most purposes.

图像质量可以设置为一般、良好、优质，大多数情况下，质量就可以。

网站设计应该能够吸引访问者 设计网站应该首先确定网站目标

评论 (0) All