HTML5视频应用解析：从Flash到<video/>的转变

“TUP第8期HTML5黄后锦演讲PPT”主要探讨了HTML5在视频应用中的重要性，特别是在不支持Flash的设备如iPad上的解决方案。 HTML5是下一代网页标准，其中的一个核心特性就是引入了 `<video>` 标签，这使得网页可以直接嵌入和播放视频内容，无需依赖像Flash这样的第三方插件。Flash曾经是网络视频的主要承载方式，但在iPad等不支持Flash的设备上，HTML5的`<video>` 标签成为了解决问题的关键。 `<video>` 标签的使用包括以下几个方面： 1. 属性Attributes：例如`autoplay`（自动播放）、`controls`（显示播放控制条）、`src`（指定视频源）、`poster`（预览图像）、`width`和`height`（设定视频尺寸）等。这些属性允许开发者对视频播放进行定制，如控制是否自动播放，设置视频的初始显示图片等。 2. 特性Properties：如视频的宽度、高度、持续时间、当前播放时间等，可以通过JavaScript进行访问和操作，实现更丰富的交互功能。 3. 方法Methods：如`play()`（播放视频）、`pause()`（暂停视频）、`currentTime`（设置或获取当前播放时间）等，提供了对视频播放状态的控制。 4. 事件Events：如`loadstart`（视频开始加载）、`play`（视频开始播放）、`pause`（视频暂停）、`ended`（视频播放结束）等，可以监听这些事件来执行相应的处理函数，增强用户体验。 5. 编码Codecs：HTML5视频支持多种编码格式，如H.264、WebM、Ogg等。不同的浏览器可能支持不同的编码，因此在实际应用中，通常需要提供多个来源（source）以确保跨浏览器兼容性。例如，可以使用`<source>`标签来指定不同编码格式的视频文件。 6. 播放列表M3U8：用于HTTP Live Streaming（HLS），这是一种将视频流分割成小段TS文件的技术，通过M3U8索引文件进行播放。这种方式适应于不同带宽条件，可以实现自适应流媒体播放。M3U8文件包含了视频的片段信息，如每段的时长、顺序等。 实践案例中，一个基本的HTML5视频播放器标签如下所示： ```html <video autoplay controls src="list.m3u8" poster="preview.jpg" width="500" height="400"> </video> ``` 这个示例指定了视频的来源为M3U8播放列表，预览图片，以及播放器的尺寸。 对于开发者来说，了解和掌握这些知识非常重要，因为它们可以帮助创建适应多平台、具有良好用户体验的视频应用。参考链接包括W3C关于`<video>`元素的官方文档，IETF的HTTP Live Streaming规范，Apple的HTTP Live媒体流概述，以及WebM项目和Microsoft关于视频格式支持的信息，这些资料提供了深入学习HTML5视频的资源。在实际开发中，解决兼容性问题和优化播放体验是关键，因此，Q&A环节可能涵盖了这些问题的解答。