demo使用方法:鼠标从左边向右边滑过40s的时候video将自动播放,模仿swipe的flash划过之后自动动画。
鼠标进入video的时候位置在左边导致计算的比例超过40/44 会使得视频在当前的currentTime播放。
通过上面两个按钮可以显示/隐藏controller,用来观察视频时间轴变化
video V5的浏览器only这只是一个简单的Demo,主要是为了尝试是否能实现swipe.nokia.com当中的交互控制。思路如下:
- 给video增加onmousemove的属性,如果视频不是播放状态,当鼠标在video上面移动的时候,获取Event.offsetX。
- 通过x和video的宽度计算video的起始位置,并赋值给$video.currentTime。
- 一旦startTime超过了某个位置,开始播放动画,onmousemove的事件失效。
- 当视频停止的时候,重新开始。
问题:
- onmousemove的动画不如flash的平滑,可能有几种解决方案:通过记录_x和$x来重新规划算法,不使用直接赋值currentTime的方式去控制。
- eventTester测试出来的事件并非都能执行,部分事件无法给出响应。
- 进度条可做,需要研究下mediaelement.js
- 动画过场可以通过css animation来做。先将video的translatey设置到div高度之下,显示滚动条。当加载完成之后触发事件,将video移动上来即可
- 最后的跳转到片头的渐变可以先将片头截图,放在video后面,将video整个做透明动画,动画完成之后再将video的currentTime设置成为0显示出来即可(需要一个标识防止animation当中鼠标划过)。
- 美化以及去掉控制条显示。