一、 视频控制

视频暂停

对比自己手头的网站源码和实际生成的页面后，发现源码中包含了视频地址的 标签，在实际页面中，会再生成一个子节点，视频播放控制，需要对这个子节点设置才能生效。

// 视频暂停代码

var videoNode = document.getElementById('videodis_html5_api');
// http://stackoverflow.com/questions/19355952/make-html5-video-stop-at-indicated-time
// 下面这个函数可以使视频只暂停一次
// 常规的pause方法,只要视频播放时长超过指定时间
// 就会一直执行暂停函数
var pausing_function = function(){
// currentTime 的单位为秒，有些时间属性单位为毫秒，要区分好
if(this.currentTime >= 2) {
this.pause();
videoOverlay();
// 暂停播放后，移除事件监听器
// 否则视频播放只要超过2秒，就会一直被暂停
this.removeEventListener("timeupdate",pausing_function);
}
};
videoNode.addEventListener("timeupdate", pausing_function);

二、视频覆盖

这个功能的原理很简单，就是在视频区域再添加一个相同位置相同尺寸的同级节点，并让该节点的 z-index 属性大于视频节点的属性即可，以下只摘录关键代码：

var overlayNode = document.createElement('div');
// 因为视频节点是普通的节点,所以直接让需要覆盖在其上的新节点宽高与其相同即可
// clientWidth属性只有数值，所以还需手动加上 'px' 这个单位
overlayNode.style.width = videoNode.clientWidth + 'px';
// http://stackoverflow.com/questions/9191803/why-does-z-index-not-work
// 只有设置了position属性的元素,z-index才能对其起作用
overlayNode.style.position = 'relative';
overlayNode.style.zIndex = 20;

关键字：JavaScript, 节点, 视频, 源码

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！