新闻中心

3D旋转视频H5+JS+CSS3 实现圣诞情缘教程-慕课网

时间:2019-10-25 01:12

  3D动画旋转停止后会播放对应页面的视频,这里视频采用的是HTML5的Video标签播放的。为了便于理解,我把视频的代码也一并写到了Carousel类里面,具体请参考this.palyVideo这个方法,然后在Carousel的入口处传入视频的源地址。

  视频的衔接是必须在动画之后的,所以这里同样会与旋转动画绑定一个transitionend事件(旋转式通过过渡transitions的方式实现的)

  pageB.js中的调用代码,在run方法中传递一个回调,监听了transitionend事件结束后触发视频,流程部分就是这样衔接的。

  绑定loadeddata,监听到视频数据加载完成后开始播放视频。视频在出现是时候会带有一个弹跳的效果bounceIn,这个是用css3动画实现的,具体在pageB.css里面。

  同样的视频可能需要衔接后续的动作,可以在loadeddata与ended中加入完成的回调函数即可。

环亚