html - 让视频在网页上无缝播放

Question

我有一个 157 兆字节的 mov 文件。我尝试在我的页面上运行它在一个 javascript 滚动动画中，动画非常不稳定，事实上我使用 css 来模拟一个蒙版，但是这个东西没有被屏蔽，可能是整个页面的缓慢，页面从未完全加载，电影文件几乎不可能滚动页面。该文件太大了。我目前已将其嵌入:

         <a href="#">
           <object class="im" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="286" width="655">
  <param name="src" value="why_eating_dry_fruit_is_unhealthy.MOV">
  <param name="autoplay" value="false">
  <param name="type" value="video/quicktime" height="286" width="655">
  <embed src="why_eating_dry_fruit_is_unhealthy.MOV" height="286" width="655" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">
 </object>
         </a>

我的问题是:

1) 我应该将 mov 转换为 swf - 也就是说，swf 是否是一种更兼容、更适合无缝集成到 html 网页中的格式？

2) 无论我选择哪个，如何减小文件大小 - 就像在视频无缝播放的 youtube 上一样？我计划使用 javascript 滚动浏览视频库，因此我需要视频不要拖延页面。

3) 此外，很多带有视频库的网站都有一个图标，表示“点击播放”。那是视频本身的一部分，还是我可以创建一个图像，然后在点击时播放视频？

如果重要的话，我有 Adob​​e Flash CS4 Professional。如果 mov 文件更合适，那么我怎样才能减少它的文件大小？

感谢回复。

Answer 1

首先:检查是否所有浏览器都会出现这种情况。尝试禁用所有扩展程序和主题，然后看看它是否运行良好。

---

其次:检查完毕，返回本答案。

---

第三:继续阅读这个答案。

---

制作三个版本:移动端、桌面端和高清，让用户决定。

• 高清:原始 157 MB 文件
• 台式机:文件较小，分辨率和质量较低 — 20~50 MB
• 移动设备:大约 320x480 像素的小分辨率 — 5~10 MB

如果您有 Mac，可以使用 QuickTime X 减小文件大小。如果您有 Windows 计算机，可以使用各种工具，例如 Miro Video Converter .

---

点击播放按钮只是注入(inject) <object> 的按钮使用 JavaScript 将带有属性的标签添加到 DOM 中。它们通常不是视频本身的一部分，除非它是 Flash。然而，Flash 正在慢慢走到尽头，HTML 5 支持新的 <video>标记哪些规则。 :D

---

玩得开心!