1. 在播放进度里面实现

var progress = document.querySelector('.progress')
//0.实现进度条 
//1.获取所需元素
//2.根据时间来实现百分比
var percent = presentT/totalT*100
progress.style.width = percent+'%'
全屏：video.webkitRequestFullScreen();
 
// 0.实现全屏
var expand = document.querySelector('.expand')
expand.addEventListener('click',function(){
	videoObj.webkitRequestFullScreen()
但是这样会覆盖我们自定义的控制条
使用提高层级并不能解决
使用user agent stylesheet来更改也起不了作用
我们可以使用video存放的容器来实现全屏，然后video根据父元素进行变化即可
 
var videoObj = document.querySelector('video')
var playBtn = document.querySelector('.play_pause')
var progressTimer = document.querySelector('.progress_timer')
var durationTimer = document.querySelector('.duration_timer')
var progress = document.querySelector('.progress')
var player = document.querySelector('.player')
var expand = document.querySelector('.expand')
playBtn.addEventListener('click', function(){
	if(videoObj.paused){
		// 如果视频处于播放状态
		videoObj.play()
		this.classList.remove('fa-play')
		this.classList.add('fa-pause')
	}else{
		videoObj.pause()
		this.classList.add('fa-play')
		this.classList.remove('fa-pause')
let {totalT,presentT} = {totalT:0,presentT:0}
videoObj.addEventListener('canplay',function(){
	totalT = this.duration
	var videoDuration = formatTime(totalT)
	durationTimer.innerHTML = videoDuration
videoObj.addEventListener('timeupdate',function(){
	presentT = this.currentTime
	var videoCurrent = formatTime(presentT)
	progressTimer.innerHTML = videoCurrent
	var percent = presentT/totalT*100
	progress.style.width = percent+'%'
function formatTime(t){
	var h = parseInt(t/3600)
	h = h<10?'0'+h:h 
	var m = parseInt(t%3600/60)
	m = m<10?'0'+m:m
	var s = parseInt(t%60)
	s = s<10?'0'+s:s
	return h+':'+m+':'+s
expand.addEventListener('click',function(){
	player.webkitRequestFullScreen()
当视频播放结束后的处理
可以给视频增加声音，清晰度，快进按钮
对于全屏时的操作
点击进度条可以实现进度播放
                    案例参考先来看一下一些视屏控件需求点击按钮实现视频的播放和暂停按钮切换全屏和退出全屏功能进度条和时间前期准备HTML DOM Video 对象文档图标字体库下载和文档案例目录HTML代码我们自定义实现控制条，所以video不要使用controls属性从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也...
video.js 是开源插件，据说甚至可以集合到gitbook上note: 
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。参考文章:
HTML5视频播放器Video.Js
				
因需求需要做个鼠标移动则视频放大，图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧)，主要用到的就是一个属性，直接增加一个css的属性如下：
transform:scaleX(倍数)scaleY(倍数); 倍数可以是小数自己可以根据需求调整但是写1的话是一样大的
如果是放大镜那种效果大概实现思路就是：
1.获取到原有视频或者图片的高度和宽度
var width = $("div").css("width");
var height = $("div").css("height");..
原始版的库：github/videojs
vue 封装过的组件：npm/vue-video-player
这是一个非常棒的播放器，还兼容 hls 的直播流（m3u8）格式的等，还支持自定义组件，基本上满足播放器的很多功能了。
如果想了解直播的可以看下以前的文章 vue 项目进行直播视频 vue-video-player
后面更多会说自定义组件
说一说我的遇到的坑：
本来用播放器播放直播流 OK 了，可是 UI 和我说，播放器在回放的时候，希望像普
				
开启全屏
 if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
 //FireFox
 else if (document.documentElement.mozRequestFullScreen) {
      document.docum...
最近在做一个视频播放的项目，用video自带的控制条(controls)，点击全屏之后，再退出全屏之后，会导致输入框触发不了键盘事件，一直找不到原因，最后实在没办法，只能自己写全屏事件来解决这个问题。
1、首先把列表的video改为用图片展示
2、全屏后把设置video的宽高为100%，并去掉video的controls属性，这样就隐藏了video自带的控制条
video.styl...
				
video.js视频播放器 的使用video.js视频播放器安装引入使用
video.js视频播放器
接到个需求，需要一个视频播放页面，并且进度条需要在某个时间点打上标记。在网上找个一下，发现一个叫videojs-markers的包可以完成此项功能
实现效果图
首先安装videojs:
npm install video.js
也可以到github下载
然后到下载视频标记包videojs-markers
marker download
import 'video.js/dist/video-
问题原因：在移动端使用video.js与fastclick 冲突
解决方式：修改fastclick的源码
FastClick.prototype.needsClick = function(target) {
		switch (target.nodeName.toLowerCase()) {
		// Don't send a synthetic click to disabled inputs (issue #62)
				
文章目录一、页面的HTML部分二、css部分三、暂停功能/播放功能四、全屏功能五、当前时间和总时间的显示六、进度条拖动功能七、播放结束时候的处理八、data部分九、结语
全屏video会在最上层，这个时候设置定位或者z-index都是无效的，按照有些博客中的z-index设置成2147483647也没用，x5-video-player-type="h5"也没用，于是决定重写控制条。
经过分析，简单的重写控制条的话，有这么几个功能点：
1.暂停功能/播放功能
播放时进度条跟随功能
播放时时间改变功能
				
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
以下demo是页面进行全屏和正常屏幕的，你也可以用元素来进行全屏，当然
只有包含在顶层文档（top-level
 document）内部的标准HTML元素、元素和元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及obje