超级会员免费看
HTML5视频与本地存储技术全解析
1. 视频播放中的错误处理
在视频播放过程中，会遇到各种各样的问题，如网络问题、设备不兼容等。视频对象有一个错误事件（error event），可以通过
video.error
属性，更具体地说是
video.error.code
属性来查看错误原因。以下是几种常见的错误类型：
-
MEDIA_ERR_ABORTED = 1
：当浏览器中断通过网络获取视频的过程时使用（可能是用户请求）。
-
MEDIA_ERR_NETWORK = 2
：当视频的网络检索因网络错误而中断时使用。
-
MEDIA_ERR_DECODE = 3
：当视频解码失败时使用，可能是因为编码使用了浏览器不支持的功能，或者文件已损坏。
-
MEDIA_ERR_SRC_NOT_SUPPORTED = 4
：当指定的视频源由于错误的URL或浏览器无法解码源类型而不被支持时使用。
我们以Webville TV为例，为其添加错误处理功能。当出现错误时，向观众显示“PLEASE STAND BY”消息。具体操作步骤如下：
1. 在
webville.js
的
onload
处理程序中添加错误事件监听器：
video.addEventListener("error", errorHandler, false);
-
编写
errorHandler函数：
function errorHandler() {
var video = document.getElementById("video");
if (video.error) {
video.poster = "images/technicaldifficulties.jpg";
alert(video.error.code);
}
}
为了测试这段代码，可以通过以下几种方式使视频播放失败：
- 在播放的不同阶段断开网络连接。
- 给播放器一个错误的URL。
- 给播放器一个已知无法解码的视频。
- 给播放器一个甚至不是视频的URL。
- 使用软件降低带宽。
2. 视频API的应用与拓展
使用
<video>
元素和一些简单的属性可以播放视频，以下是一些常用属性：
-
autoplay
：页面加载时开始播放，但仅在适当的时候使用。
-
controls
：使浏览器显示一组播放控件，不同浏览器的控件外观和感觉可能不同。
-
poster
：可以提供自己的海报图像。
-
src
：包含要播放视频的URL。
常见的视频和音频格式标准有很多，常用的三种格式是WebM、MP4/H.264和Ogg/Theora。需要根据目标受众来确定提供哪些格式。可以使用
<source>
标签指定替代视频格式，并使用完全指定的类型来节省浏览器的工作和时间。
视频对象提供了丰富的属性、方法和事件，例如：
- 支持
play
、
pause
、
load
、
loop
和
mute
等方法和属性，可直接控制视频的播放。
-
ended
事件可用于知道视频播放何时结束，例如实现播放列表。
-
canPlayType
方法可以以编程方式询问视频对象是否可以播放某种格式，返回值可能是空字符串（不支持该格式）、
maybe
（可能能够播放该格式）或
probably
（确信能够播放该格式）。
此外，还可以将canvas用作视频的显示表面，实现自定义控件或其他视频效果。可以使用临时缓冲区在将视频复制到显示之前进行处理，并使用
setTimeout
处理程序处理视频帧。
以下是一些关于视频应用的拓展思路：
- 创建自己的屏幕控件或节目指南。
- 创建画中画观看模式。
- 使用所有已知的canvas图形和文本API直接在视频上进行操作。
- 创建仅在特定播放时间范围内显示的基于时间的内容。
- 使用JSONP使其具有交互性。
- 使用Web服务为视频提供上下文相关信息。
- 根据位置提供相关广告。
3. 视频处理效果代码示例
以下是三种不同的视频处理效果代码：
// 西部风格滤镜，强调像素的红色和绿色成分，淡化蓝色成分，使视频带有褐色色调
function western(pos, r, g, b, data) {
var brightness = (3*r + 4*g + b) >>> 3;
data[pos * 4 + 0] = brightness+40;
data[pos * 4 + 1] = brightness+20;
data[pos * 4 + 2] = brightness-20;
}
// 科幻风格滤镜，反转每个像素的RGB成分
function scifi(pos, r, g, b, data) {
var offset = pos * 4;
data[offset] = Math.round(255 - r) ;
data[offset+1] = Math.round(255 - g) ;
data[offset+2] = Math.round(255 - b) ;
}
// 黑白卡通风格滤镜，将红色成分小于120（255为最大值）的像素变为黑色，其他像素变为白色
function bwcartoon(pos, r, g, b, outputData) {
var offset = pos * 4;
if( outputData[offset] < 120 ) {
outputData[offset] = 80;
outputData[++offset] = 80;
outputData[++offset] = 80;
} else {
outputData[offset] = 255;
outputData[++offset] = 255;
outputData[++offset] = 255;
}
outputData[++offset] = 255;
++offset;
}
4. 浏览器存储的发展与HTML5 Web Storage
在过去，浏览器存储主要依靠cookie。当浏览器从服务器（如“pets - R - us.com”）检索网页时，服务器可以在响应中发送一个cookie。cookie包含一个或多个键值对，例如
pet=dog; age=5; color=black
。浏览器会将cookie本地保存，并在下次发出请求时将其发送回服务器。cookie可以用于各种目的，如自定义用户体验、存储购物车数据或维护游戏状态，但它存在一些问题：
- 只有4k的存储空间，对于一些应用来说不够用。
- 每次请求和响应都来回发送cookie，效率较低，尤其是在移动设备带宽有限的情况下。
- 键值对在HTTP请求中的处理方式在代码中比较麻烦。
- 可能会来回传输个人数据。
- 与客户端开发不太匹配，更侧重于服务器端。
而HTML5的Web Storage提供了一个简单的JavaScript API，用于在浏览器中存储持久的键值对。每个现代浏览器为每个域名提供5兆字节（或更多）的本地存储桶。其工作原理如下：
1. 页面可以在浏览器的本地存储中存储一个或多个键值对：
localStorage.setItem("sticky_0", "Pick up dry cleaning");
- 之后可以使用键来检索其对应的值：
var sticky = localStorage.getItem("sticky_0");
alert(sticky);
存储是持久的，即使关闭浏览器窗口或退出浏览器，数据仍然存在。与cookie类似，页面只能存储和检索由同一域名的页面创建的项目。
5. 本地存储API的使用与注意事项
本地存储API的使用非常简单，以下是一些常见问题及解答：
-
Web Storage和local storage是否相同
：Web标准名为“Web Storage”，但大多数人称之为本地存储（local storage），浏览器通过
localStorage
对象暴露API。
-
Web Storage API的支持情况
：该API得到了广泛支持，甚至可以追溯到IE8，现在大多数现代移动浏览器也支持。在使用之前，建议进行测试：
if (window["localStorage"]) {
// 你的localStorage代码
}
- 存储容量 ：每个域名有5兆字节的存储空间。
-
多次对同一键使用
setItem的结果 ：键在localStorage中是唯一的，setItem会用第二个值覆盖第一个值。例如：
localStorage.setItem("sticky_1", "Get Milk");
localStorage.setItem("sticky_1", "Get Almond Milk");
var sticky = localStorage.getItem("sticky_1");
// sticky的值将是"Get Almond Milk"
- 谁可以访问本地存储中的数据 ：本地存储根据数据的来源（可以简单理解为域名）进行管理。同一域名的页面可以相互访问存储的项目，而其他域名的代码只能访问自己的本地存储项目。
-
从本地计算机加载页面时的来源
：在这种情况下，来源是“Local Files”来源，适合用于测试。如果有服务器，也可以在服务器上测试，此时将处于域名的来源中。需要注意的是，在某些浏览器中，如果使用
file://加载页面，本地存储可能无法正常工作，建议使用localhost://或托管服务器。
6. 存储数字类型数据
在
localStorage
中，只能使用字符串作为键和值。但可以通过一些方法存储和检索数字，例如存储整数和浮点数：
- 存储整数：
localStorage.setItem("numitems", 1);
var numItems = parseInt(localStorage.getItem("numitems"));
numItems = numItems + 1;
localStorage.setItem("numitems", numItems);
- 存储浮点数：
localStorage.setItem("price", 9.99);
var price = parseFloat(localStorage.getItem("price"));
通过以上对HTML5视频和本地存储技术的介绍，我们可以看到它们为Web开发带来了更多的可能性和便利。无论是处理视频播放中的错误，还是利用本地存储来优化应用，都能提升用户体验和应用性能。
HTML5视频与本地存储技术全解析
7. 视频错误处理与测试流程总结
为了更清晰地理解视频错误处理的流程，我们可以用mermaid流程图来展示：
graph TD;
A[页面加载] --> B[添加错误事件监听器];
B --> C{是否发生错误};
C -- 是 --> D[调用errorHandler函数];
D --> E{是否存在错误};
E -- 是 --> F[设置海报图片];
F --> G[弹出错误代码提示];
C -- 否 --> H[正常播放视频];
在测试视频错误处理代码时，具体的测试步骤如下：
1.
网络断开测试
：在视频播放的不同阶段，如开始播放、播放中途等，断开网络连接，观察是否触发错误处理。
2.
错误URL测试
：给播放器提供一个错误的URL，例如拼写错误或者指向不存在的视频文件，检查是否能正确捕获错误。
3.
不支持格式测试
：使用已知浏览器无法解码的视频格式，如某些特殊编码的视频，查看是否出现相应错误。
4.
非视频URL测试
：提供一个不是视频的URL，如图片、文本文件等的URL，验证错误处理机制。
5.
带宽降低测试
：使用软件降低网络带宽，模拟网络不佳的情况，看是否能处理网络相关错误。
8. 视频API属性与方法对比
为了更好地掌握视频API的属性和方法，我们可以通过表格进行对比：
| 属性/方法 | 描述 | 使用示例 |
| ---- | ---- | ---- |
| autoplay | 页面加载时开始播放视频 |
<video autoplay src="video.mp4"></video>
|
| controls | 显示浏览器默认的播放控件 |
<video controls src="video.mp4"></video>
|
| poster | 设置视频的海报图片 |
<video poster="poster.jpg" src="video.mp4"></video>
|
| src | 指定视频的URL |
<video src="video.mp4"></video>
|
| play() | 播放视频 |
video.play();
|
| pause() | 暂停视频 |
video.pause();
|
| load() | 重新加载视频 |
video.load();
|
| loop | 循环播放视频 |
<video loop src="video.mp4"></video>
|
| mute | 静音播放视频 |
video.muted = true;
|
| ended事件 | 视频播放结束时触发 |
video.addEventListener('ended', function() { /* 处理代码 */ });
|
| canPlayType | 检查浏览器是否能播放某种格式 |
var canPlay = video.canPlayType('video/mp4');
|
9. 本地存储使用场景与优势分析
本地存储在Web开发中有很多实用的场景，以下是一些常见的使用场景：
-
购物车应用
：可以存储用户添加到购物车的商品信息，如商品ID、数量、价格等，减少与服务器的交互，提高用户体验。
-
用户偏好设置
：保存用户的个性化设置，如主题颜色、字体大小、语言偏好等，下次打开页面时直接应用这些设置。
-
离线应用
：在没有网络的情况下，应用可以从本地存储中读取数据，继续提供部分功能，如查看之前浏览过的文章、图片等。
本地存储相比cookie有以下优势：
-
存储容量大
：每个域名有5 - 10兆字节的存储空间，远远大于cookie的4k限制。
-
性能提升
：数据存储在本地浏览器，减少了与服务器的来回数据传输，尤其是在移动设备上，可以节省带宽和提高响应速度。
-
更适合客户端开发
：本地存储主要由客户端管理，与现代的客户端开发模式更匹配，减少了对服务器的依赖。
10. 本地存储操作的代码示例总结
以下是本地存储操作的完整代码示例，包括存储、读取、更新和删除操作：
// 存储数据
localStorage.setItem("username", "John");
localStorage.setItem("age", 30);
// 读取数据
var username = localStorage.getItem("username");
var age = parseInt(localStorage.getItem("age"));
console.log("Username: " + username + ", Age: " + age);
// 更新数据
localStorage.setItem("age", 31);
age = parseInt(localStorage.getItem("age"));
console.log("Updated Age: " + age);
// 删除数据
localStorage.removeItem("username");
username = localStorage.getItem("username");
console.log("Username after removal: " + username);
11. 视频与本地存储结合的应用思路
我们可以将视频和本地存储技术结合起来，创造出更丰富的Web应用。以下是一些结合的应用思路：
-
视频播放记录
：使用本地存储记录用户的视频播放进度，当用户再次打开视频时，可以直接从上次播放的位置继续播放。具体实现步骤如下：
1. 在视频播放过程中，使用
timeupdate
事件监听视频的播放时间。
2. 将当前播放时间存储到本地存储中。
3. 下次打开视频时，从本地存储中读取播放时间，并将视频定位到该时间点开始播放。
var video = document.getElementById("video");
video.addEventListener('timeupdate', function() {
localStorage.setItem("video_progress", video.currentTime);
});
video.addEventListener('loadedmetadata', function() {
var progress = localStorage.getItem("video_progress");
if (progress) {
video.currentTime = parseFloat(progress);
}
});
-
视频收藏列表
：用户可以将喜欢的视频添加到收藏列表中，收藏信息存储在本地存储中。实现步骤如下：
- 为每个视频添加一个“收藏”按钮。
- 点击收藏按钮时，将视频的相关信息，如标题、URL等，存储到本地存储的一个数组中。
- 显示收藏列表时，从本地存储中读取数组并展示。
function addToFavorites(videoTitle, videoUrl) {
var favorites = JSON.parse(localStorage.getItem("favorites")) || [];
favorites.push({ title: videoTitle, url: videoUrl });
localStorage.setItem("favorites", JSON.stringify(favorites));
}
function displayFavorites() {
var favorites = JSON.parse(localStorage.getItem("favorites"));
if (favorites) {
favorites.forEach(function(favorite) {
console.log("Title: " + favorite.title + ", URL: " + favorite.url);
});
}
}
12. 总结与展望
通过对HTML5视频和本地存储技术的深入学习，我们了解了视频播放的错误处理、API的使用、本地存储的原理和操作方法等内容。这些技术为Web开发者提供了强大的工具，能够创建出更丰富、更智能的Web应用。
在未来，随着技术的不断发展，我们可以期待视频和本地存储技术有更多的创新应用。例如，视频的高清播放、实时互动、虚拟现实等功能的结合，以及本地存储在数据安全、多设备同步等方面的改进。开发者可以不断探索和尝试，将这些技术应用到实际项目中，为用户带来更好的体验。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
