17、HTML5 媒体与 Web Workers 应用实践

最新推荐文章于 2025-11-15 12:49:17 发布

Wind6

最新推荐文章于 2025-11-15 12:49:17 发布

阅读量25

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5视频元素权威指南文章标签： HTML5 Web Workers 视频处理

本文链接：https://blog.youkuaiyun.com/wind6/article/details/150845551

HTML5视频元素权威指南专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

HTML5 媒体与 Web Workers 应用实践

1. Web Workers 基础

Web Workers 具备调用 XMLHttpRequest 的能力，但使用时需注意，它只能在 Web 服务器上运行，因为外部脚本需要与原始页面使用相同的协议加载。这意味着不能从 “data:”、“javascript:” 或 “file:” URL 加载脚本，并且 “https:” 页面只能启动同样位于 “https:” 而非 “http:” 的 Web Workers。此外，部分浏览器（如文中提到的特定 IE 版本）尚不支持 Web Workers。

2. 在视频处理中使用 Web Workers

2.1 视频的棕褐色调处理

2.1.1 不使用 Web Workers 的实现

以下是实现视频棕褐色调处理的代码：

<video controls height="270px" width="480px" >
  <source src="HelloWorld.mp4"  type="video/mp4">
  <source src="HelloWorld.webm" type="video/webm">
  <source src="HelloWorld.ogv"  type="video/ogg">
</video>
<canvas width="400" height="300" style="border: 1px solid black;">
</canvas>
<