如何创建交互式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

值得庆幸的是, 你不需要倾家荡产，就能把一个基本的HTML5视频播放器变成一个增强的播放体验，满足观众的期望.

在一月/二月号 流媒体我回顾了一下 5个现成的HTML5视频播放器. 虽然大多数玩家都可以使用自定义HTML进行调整, JavaScript, 和CSS来容纳本文中讨论的所有特性, 我选择 JW Player 6 作为一种标准，增强的交互性可以在不需要web开发人员花费太多计费时间的情况下应用. (您可以在这里找到与我的上一篇文章和本文相关的更多信息和示例 videorx.com/players.)

移动浏览器的局限性

无. 任何HTML5视频体验都需要牢记的一个因素是手机浏览器, 总的来说, 在全屏模式下观看时不允许任何自定义. 全屏播放视频时, 智能手机和平板电脑屏幕通常都是使用操作系统或浏览器特有的原生视频播放“chrome”来播放基于浏览器的视频.

进一步, 在许多智能手机上, 视频只能在全屏模式下播放, 在这些平台上使用原生chrome, 无法内联播放视频, 网页内部. (内联播放被定义为在初始化视频的网页区域内播放.)

在某种意义上, 这个内置功能使所有基于浏览器的视频播放都是平等的, 从你的内容到你竞争对手的内容. 然而，这否定了在全屏模式下实现任何自定义功能的可能性. 解决这一限制的唯一方法是为移动设备开发一款原生应用，但代价是开发软件并将其部署到应用商店.

平板电脑上的移动浏览器通常允许使用定制的播放器界面和覆盖层进行内联视频播放, 一些较新的Android浏览器也是如此. 例如, 如果您想在视频顶部显示图形, 当你在页面上观看视频时，iPad的Safari移动浏览器会显示覆盖层. 但是，如果您在全屏模式下观看视频，浏览器将删除覆盖层.

增强功能#1:海报框架

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

海报图像的典型格式包括JPEG和PNG，当然也可以使用GIF或SVG. 海报框架的默认行为在所有浏览器中都是一致的，即图像在初始页面加载时显示. 当用户点击播放按钮时，海报框消失，视频开始播放.

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

 现成的web视频播放器在指定海报框架的JavaScript api方面有所不同. JW Player 6在初始设置调用中将海报框架作为图像属性:

jwplayer(“球员”).设置({

     图片:“http://example.com/poster.jpg”,

     文件:“http://example.com/video.mp4”,

     宽度:640年,

     身高:360

});

 海报框架也可以改善你的视频元数据的搜索引擎. 出于这个原因, 无论您在网页上插入视频播放器的方法如何, I recommend including a static