如何创建交互式HTML5视频

慢慢地，HTML5浏览器开始支持丰富的视频体验. 在本文中, 您将学习如何通过添加播放列表来超越基本的视频播放, 章标记, 海报框架, 擦洗条缩略图, 和更多的.

今天, most web-based video is delivered in basic “press play” experiences; viewer controls tend to be limited to a play/pause button, 搜索栏, 可能还有音量控制.

If you just use the

值得庆幸的是, you don’t need to break the bank to turn a basic HTML5 video player into an enhanced playback experience that can meet your viewers’ expectations.

在一月/二月号 流媒体我回顾了一下 5个现成的HTML5视频播放器. 虽然大多数玩家都可以使用自定义HTML进行调整, JavaScript, 和CSS来容纳本文中讨论的所有特性, 我选择 JW Player 6 as the standard by which enhanced interactivity can be applied without requiring too much billable time from a web developer. (You can find more 信息 and examples related to my last article and this article at videorx.com/players.)

移动浏览器的局限性

无. 任何HTML5视频体验都需要牢记的一个因素是手机浏览器, 总的来说, 在全屏模式下观看时不允许任何自定义. 全屏播放视频时, both smartphone and tablet screens usually play browser-based video with the native video playback “chrome” specific to the operating system or browser.

进一步, 在许多智能手机上, 视频只能在全屏模式下播放, 在这些平台上使用原生chrome, 无法内联播放视频, 网页内部. (Inline playback is defined as playback within the web page region where the video is initialized.)

在某种意义上, 这个内置功能使所有基于浏览器的视频播放都是平等的, 从你的内容到你竞争对手的内容. 然而, this negates the possibility of implementing any custom functionality in fullscreen mode. The only way around this current limitation is to build a native application for mobile deployment -- but at the cost of building the software and deploying it to an app store.

Mobile browsers on tablets generally permit inline video playback with customized player interfaces and overlays, 一些较新的Android浏览器也是如此. 例如, 如果您想在视频顶部显示图形, the iPad’s Safari Mobile browser will display the overlay while you’re watching the video on the page. 然而, if you view the video in full screen mode, the browser will remove the overlay.

增强功能#1:海报框架

网络上的许多视频都没有一个简单的海报框架, 或者是视频片段中的静止图像, 向观众指出内容的性质. HTML5’s

一个简单的海报框架的例子, 这是大多数网络视频所缺乏的，但可以通过HTML5播放器轻松实现.

Typical formats for poster images include JPEG and PNG, al虽然 you can also use a GIF or SVG. The default behavior of the poster frame is consistent across all browsers in that the image is displayed on initial page load. When the user clicks the play button, the poster frame disappears and the video begins to play.

If your preferred approach to implement a video player is the use of a static