HTML5 video 事件应用示例

一、视频时间长度的获取

在网页开发中，获取视频的时间长度是一项基础操作。当视频元素（video）加载完成后，我们可以通过监听`onloadedmetadata`事件来实现这一功能。这一事件会在视频的元数据（包括时长、分辨率等）加载完毕后触发。

代码如下：

当video标签中的元数据加载完毕后，我们为其`onloadedmetadata`事件绑定一个函数。在这个函数中，我们可以通过访问video对象的`duration`属性来获取视频的时间长度。然后，我们可以通过`console.log()`函数将这个时间长度打印出来，以便我们进行后续的操作。

二、监控视频播放进度

除了获取视频的时间长度，我们还需要关注视频的播放进度。这时，我们可以使用`ontimeupdate`事件。这个事件会在视频的播放位置发生改变时触发，也就是说，每当用户快进、暂停或继续播放视频时，这个事件都会被触发。

实现方式如下：

我们为video标签的`ontimeupdate`事件绑定一个函数。在这个函数中，我们可以通过访问video对象的`currentTime`属性来获取视频当前的播放时间。这个时间是一个浮点数，可以精确到秒的小数点后的若干位。同样地，我们也可以通过`console.log()`函数将这个播放时间打印出来。

通过以上两个步骤，我们就可以在网页上实现获取视频时间长度和监控视频播放进度的功能。无论是想要了解视频的整体时长，还是想要知道当前视频的播放进度，都可以通过简单的JavaScript代码实现。让用户在观看视频的也能感受到网页的交互性和实用性。

最终，通过cambrian的render方法将上述内容渲染至网页的body部分，为用户呈现一个兼具实用性和交互性的视频播放体验。