自定义video播放器的常用的事件。

window.onresize

这个事件主要用于当浏览器窗口发生改变时，实时获取video的width和height；
代码示例：

window.onresize=function() {//  控制窗口不小于800时，进行video的width和height的重新获取；if(document.documentElement.clientWidth>=800) {video.width = document.documentElement.clientWidth;video.height = document.documentElement.clientHeight - controler.offsetHeight;}}

video.play()和video.pause()

这两个方法主要用于播放暂停按钮的事件切换；
代码示例：

startOrpause.onclick=function(){//判断视频是否时暂停状态，注意暂停状态是：video.paused;要与video.pause()方法区别开来；if(video.paused) {// 播放暂停按钮的精灵图切换startOrpause.classList.add('active');//    点击按钮后，让video播放；video.play()；timer = setInterval(move,100);}else {// 播放暂停按钮的精灵图切换startOrpause.classList.remove('active');//  点击按钮让video暂停播放；video.pause();clearInterval(timer);}}

video.currentTime

获取video当前播放的进度时间；
这个property属性使用非常频繁；
比如当点击停止按钮时，设置video.currentTime；
当拖动播放进度条时，也需要实时获取它；

video.duration

获取当前视频文件的总共需要的播放时间。
当拖动或点击播放进度条时，关联进度条的长度和当前播放时间；

// 当前时间=总时间*(当前进度条拖动的距离/总共进度条的长度)
//  播放进度条点击事件
progress1.onclick=function(ev){ev = ev || event;video.currentTime = video.duration * ((ev.clientX - this.offsetLeft)/this.clientWidth);progressBtn1.style.left = progressBgc1.style.width = (progress1.clientWidth - progressBtn1.offsetWidth )* (video.currentTime / video.duration)+ 'px';
}

video.muted和video.volume

这两个property是在设置声音进度条和静音按钮上使用；
当设置video.muted=true时，video.volume的值并没有重置为0；

全屏按钮设置需要的方法

全屏是浏览器内部写好的，我们可以直接调用，但是不同的浏览器，API的名称不一样；
全屏可以是任意元素，比如div，img；
全屏兼容性写法：

//   判断是否全屏，isFullScreen是自定义的布尔值变量；
if(isFullScreen) {  //fullScreenSpan是获取的代表全屏的元素；// 全屏 ---> 不是全屏 --> removefullScreenSpan.classList.remove("active");isFullScreen = false//  w3c标准的退出全屏方法；if (document.exitFullscreen) {  document.exitFullscreen();  }  //   火狐的退出全屏方法else if (document.mozCancelFullScreen) {  document.mozCancelFullScreen();  }  //   谷歌和webkit内核的退出全屏方法else if (document.webkitCancelFullScreen) {  document.webkitCancelFullScreen();  }//  IE的退出全屏方法else if (document.msExitFullscreen) {document.msExitFullscreen();}
} else {fullScreenSpan.classList.add("active");isFullScreen = truevar docElm = document.documentElement;//  w3c标准的设置全屏方法；if (docElm.requestFullscreen) {  docElm.requestFullscreen();  }//   火狐的退出设置全屏方法else if (docElm.mozRequestFullScreen) {  docElm.mozRequestFullScreen();  }// 谷歌和webkit内核的设置全屏方法else if (docElm.webkitRequestFullScreen) {  docElm.webkitRequestFullScreen();  }//IE11设置全屏方法else if (docElm.msRequestFullscreen) {docElm.msRequestFullscreen();}
}

总时间duration的显示

获取总时间video.duration之前，需要事件监听，需要做兼容写法；

loadeddata   媒体的第一帧已经加载完毕。
suspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

//  谷歌浏览器duration显示video.addEventListener('suspend',function(){durationTime.innerHTML=changeTimeStyle(video.duration);})//  火狐浏览器和IE的duration显示video.addEventListener('loadeddata',function(){durationTime.innerHTML=changeTimeStyle(video.duration);})

自定义video播放器的常用的事件。相关推荐

H5 实现自定义video播放器,快来点我吧
效果要实现自定义video播放器需要熟悉video的相关操作视频播放它有哪些操作 1. 播放 play() 2. 暂停 pause() 3. 判断当 ...
JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器概述 CANVAS绘制核心代码播放器代码使用页面HTML代码使用页面JS代码使用示例概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
html5+video手机样式修改,如何自定义video播放器样式？
本篇文章给大家分享了关于如何自定义video播放器样式,内容很详细,希望可以帮助到大家. DIY 本文基于HTML5 Video API,自定义Web视频播放器样式. 其实吧,原生的video 标签样 ...
html自定义video播放器
本章的css可以说约等于没有,全是逻辑,仅供参考 html <!DOCTYPE html> <html lang="en"> <head>< ...
玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
【Web技术】662- 玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
模拟video播放器
更新: 关于第二点,也就是说计算进度条拖放按钮定位的问题. 很感谢 batsing 同学提供了更好的方案: 滑块左偏量 = (进度条长 - 滑块长) * (已播时间/总时长) 尝试过之后发现除了拖曳滑 ...
Android自定义一个播放器控件
介绍最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...