移动网页中图像、视频和Flash动画的使用指南

### 移动网页中图像、视频和 Flash 动画的使用指南 #### 1. 图像相关操作 在移动网页设计中，图像的处理至关重要。不同设备和网络对文件大小的处理能力不同。例如，使用 Wi-Fi 连接访问网站的移动用户比使用 3G 网络的用户能容忍更大的文件大小，4G 网络用户又比 3G 网络用户能处理更大的图像。尽量将照片控制在 30KB 以下，但当图像占据整个或大部分屏幕时，这并不总是可行的。 - **图像显示大小**：图像的显示大小指其在屏幕上所占的像素数，可以使用 width 和 height 属性控制页面上的显示大小，属性值以像素为单位，示例代码如下： ```html <img src="images/logo.png" width="100" height="100" /> ``` 如果不设置这些属性，图像将以原始大小显示。 - **使图像成为可点击链接**：可以通过使用 `<a href>` 标签将图像包围起来，使其成为可点击链接，示例代码如下： ```html <a href="http://www.domain.com/page.html"><img src="images/logo.png" width="100" height="100" /></a> ``` Internet Explorer 和一些其他浏览器在将图像放在链接标签内时，会在图像周围显示难看的蓝色边框。可以在 `<img>` 标签中使用 `border="0"` 属性去除边框，也可以在 CSS 文件中添加以下选择器来去除所有图像的边框： ```css a img { border: none; } ``` #### 2. 移动网页中的数字视频 向网页交付数字视频可能会比较棘手，主要是因为视频文件很大。但如果部署得当，视频剪辑既有趣又有教育意义。在将视频嵌入网页之前，要确保视频本身和视频文件都针对移动设备进行了优化。 - **了解数字视频文件**：大多数手持设备支持的视频文件格式有限，很多仅支持 3GPP 和 MPEG4 格式。 - **3GPP**：3GPP（第三代合作伙伴计划）是为 3G 电话网络流式播放设计的文件格式。大多数支持 3G 的手机支持 3GPP 格式视频的播放和录制。其他流行视频格式，如 AVI 和 MOV（QuickTime），可以使用 Adobe Media Encoder 等流行视频文件转换器转换为 3GPP 格式（文件扩展名为 .3gp）。该格式在功能上与 MPEG4 相当相似。 - **MPEG4**：除了 Adobe 的 FLV（Flash 视频）格式外，MPEG4（运动图像专家组 4）或 MP4 可能是互联网上最常见的视频格式。它非常通用，能很好地压缩视频，使文件小到足以在低带宽环境中流式播放和回放。 - **数字视频的嵌入、下载和播放**：视频在网页（尤其是移动网页）中的下载和播放效果取决于多个相关因素，如下表所示： |因素|说明| | ---- | ---- | |帧速率（FPS）|数字视频可看作一系列快速连续出现以模拟运动的略有不同的图像，每幅图像为一帧，运动模拟效果通常取决于每秒出现的帧数，即帧速率。减少帧数可减小文件大小，但过多减少会使视频播放卡顿。可使用媒体编码器（如 Adobe Media Encoder）减少视频的帧速率。| |显示大小|通常也称为帧大小，与图像类似，显示大小会极大影响视频文件大小。可通过创建不同版本的视频来设置不同的显示大小，但要注意显示大小越大，文件越大。改变数字视频的显示大小需要在视频转换器或编码器程序中进行重采样或编码。| |压缩|压缩是减小视频文件大小最有效的方法，但过度压缩会严重降低视频质量。有有损和无损两种压缩类型，重采样视频时通常需要有损压缩。MPEG4 和 3GPP 在不过度压缩的情况下，能在压缩视频的同时较好地保持质量。大多数编码器允许选择压缩百分比或不同质量级别。| |声音重采样（压缩）|几乎每个视频文件都有音轨，改变视频中的声音设置有助于大幅减小文件大小。可在编码设置过程中设置声音压缩和质量设置，主要设置包括采样率（kHz）、采样类型（bps）以及单声道与立体声的选择。一般来说，数字视频在网页中的安全设置为采样率 44kHz，采样类型 128bps 或 16Kbps，仅在文件内容需要时使用立体声设置。| |流式传输|流式传输是将视频文件从服务器传输到终端用户设备的过程，其主要目的是消除终端用户在视频开始播放前等待整个视频下载的需求，并确保视频在下载时能流畅播放。有视频流式传输（需要视频或媒体流式服务器）和渐进式流式传输（不需要媒体服务器）两种类型。Adobe 的 Flash Player 和 Flash 视频文件格式的扩展（如 FLV 和 SWF）是渐进式流式传输的一种较成熟形式，但许多移动设备不支持 Flash。| 以下是数字视频处理的流程图： ```mermaid graph TD; A[数字视频] --> B[选择格式: 3GPP或MPEG4]; B --> C[调整帧速率]; ```