回顾

算了不回顾了
直接搞起，打开JS1中写的bvd.js

播放视频

  1. 播放按钮隐藏

  2. 视频开始播放
    当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在JS1中我们就已经实现。但我们改变一下思维，给视频添加点击tap事件，使视频播放，再触发播放事件，从而让播放按钮隐藏

    1. pro.initEvent = function(){
    2.     var that = this;
    4.     //给播放按钮图片添加事件
    5.     this.vimg.addEventListener('tap',function(){
    6.         that.video.play();
    7.     })
    9.     //视频点击暂停或播放事件
    10.     this.video.addEventListener('tap',function(){
    11.         if(this.paused || this.ended) {
    12.             //暂停时点击就播放
    13.             if(this.ended) {//如果播放完毕，就重头开始播放
    14.                 this.currentTime = 0;
    15.             }
    16.             this.play();
    17.         } else {
    18.             //播放时点击就暂停
    19.             this.pause();
    20.         }
    21.     })
    23.     //视频播放事件
    24.     this.video.addEventListener('play',function(){
    25.         that.vimg.style.display = 'none';
    26.     })
    28.     //获取到元数据
    29.     this.video.addEventListener('loadedmetadata',function(){
    30.         that.vC.querySelector('.duration').innerHTML = stom(this.duration);
    31.     });
    32. }

  3. 下方控制条渐渐隐藏
    隐藏并不是难点，重要的是渐渐的隐藏，在这里我们有这么几种解决方案：

    1. 定时器

    2. css3 动画帧

在这里我们2种结合起来使用

首先我们先定义好一组动画

  1. @keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}
  3. @-webkit-keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}
  5. .vhidden {
  6.     animation: vhide 3.5s ease-in;
  7.     -webkit-animation: vhide 3.5s ease-in;
  8. }

其作用就是透明度3.5秒内1=>0，ease-in 就是 由慢到快 的过度效果。有不懂css动画可以问问度娘哦
然后我们给视频开始播放事件的时候给控制条添加vhidden样式类

  1. //视频播放事件
  2. this.video.addEventListener('play',function(){
  3.     that.vC.classList.add('vhidden');
  4. })

测试效果，果然3.5s内，控制条 慢慢透明，问题是3.5s后，透明度又回到了1，这里我讲解一下，是因为动画帧默认是回弹的，我们可以加个样式

  1. .vhidden {
  2.     animation: vhide 3.5s ease-in;
  3.     -webkit-animation: vhide 3.5s ease-in;
  4.     animation-fill-mode:forwards;
  5.     -webkit-animation-fill-mode: forwards;
  6. }

CSS3 属性 animation-fill-mode 用来定义元素在动画结束后的样子。

animation-fill-mode 的默认值是 none，也就是在动画结束之后不做任何改动，如果把animation-fill-mode 改成 forwards 则动画结束后元素的样式会变成动画最后一个关键帧所规定的样式。

加上这个样式后，果然3.5s后，动画不再回弹了，但是这里要留意一下，控制条并不是不在了而是透明了，如果这时我们有写控制条的点击时间，那么在控制条位置点击，还是会触发事件，所以呢，我们还可以写上一段setTimeout来，让控制条3.5s后隐藏，这个大家可以自行取舍

  1. //视频播放事件
  2. this.video.addEventListener('play',function(){
  3.     that.vimg.style.display = 'none';
  4.     that.vC.classList.add('vhidden');
  5.     that.vCt = setTimeout(function(){
  6.         that.vC.style.visibility = 'hidden';
  7.     },3400);
  8. })

为什么动画过程是3.5s，然而js是是3.4s后执行，这里只是在未写animation-fill-mode:forwards的情况下做个保险

正在播放中

嘿嘿，视频可以播放啦！那么现在我们该考虑一下播放中有哪些事要做呢？

1. 控制条进度条慢慢增长

我们需要给视频添加一条timeupdate音视频播放位置发生改变时的事件

我们先在获取视频元数据事件中，把视频的长度给拿下来

  1. //获取到元数据
  2. this.video.addEventListener('loadedmetadata',function(){
  3.     that.vDuration = this.duration;
  4.     that.vC.querySelector('.duration').innerHTML = stom(that.vDuration);
  5. });

再从视频播放进度更新事件中计算比例，设置进度条的宽度

  1. //视频播放中事件
  2. this.video.addEventListener('timeupdate', function() {
  3.     var currentPos = this.currentTime;//获取当前播放的位置
  4.     //更新进度条
  5.     var percentage = 100 * currentPos / that.vDuration;
  6.     //设置宽度
  7.     that.vC.querySelector('.timeBar').style.width = percentage + '%';
  8. });

可以看到我们的进度条君越来越膨胀了。

2. 当前播放时间变化

同时，我们的当前播放时间显示也在timeupdate事件中设置

  1. //视频播放中事件
  2. this.video.addEventListener('timeupdate', function() {
  3.     var currentPos = this.currentTime;//获取当前播放的位置
  4.     //更新进度条
  5.     var percentage = 100 * currentPos / that.vDuration;
  6.     that.vC.querySelector('.timeBar').style.width = percentage + '%';
  7.     //更新当前播放时间
  8.     that.vC.querySelector('.current').innerHTML = stom(currentPos);
  9. });

暂停 or 停止

当我们点击视频时，如果是暂停，那就开始播放，并触发播放事件，反之视频在播放中，点击视频就会暂停，并触发暂停事件。

0. 时间定格

啦啦啦，暂停播放，timeupdate事件自然就不触发啦，所以进度条和当前播放时间就不会变啦。

1. 播放按钮显示

在暂停的时候，显示出按钮就行啦

  1. //暂停or停止
  2. this.video.addEventListener('pause',function(){
  3.     that.vimg.style.display = 'block';
  4. });

2. 下方控制条显示

控制条显示，直接去除那个vhidden样式类就好啦

  1. //暂停or停止
  2. this.video.addEventListener('pause',function(){
  3.     that.vimg.style.display = 'block';
  4.     that.vC.classList.remove('vhidden');
  5.     that.vC.style.visibility = 'visible';
  6. });

这样写看样子是没错啦，但是，如果大家在之前隐藏控制条的时候写了setTimeout的话，这个时候就要清除掉哦。

  1. //暂停or停止
  2. this.video.addEventListener('pause',function(){
  3.     that.vimg.style.display = 'block';
  4.     that.vC.classList.remove('vhidden');
  5.     that.vC.style.visibility = 'visible';
  6.     that.vCt && clearTimeout(that.vCt);
  7. });

快进快退

一个叼叼哒的小视频播放器怎么可能少的了可进可退能屈能伸呢？

来，我们先为video添加左滑右滑事件

  1. //视频手势右滑动事件
  2. this.video.addEventListener('swiperight',function(e){
  3.     this.currentTime += 5;
  4. });
  5. //视频手势左滑动事件
  6. this.video.addEventListener('swipeleft',function(e){
  7.     this.currentTime -= 5;
  8. });

可能在电脑上调试会直接进度变0，一开始我也纳闷呢，后来发现手机上webview中好像是可行的。

关于 进度条拖动改变视频进度 我暂时不打算写，因为我还没写。

全屏播放

可能大家会比较关注这个吧：

ios端：去除video标签webkit-playsinline属性即可，因为ios对h5的video标签支持还是比较不错的

  1. //调用原生方式 全屏播放
  2. pro.nativeMax = function(){
  3.     if(!window.plus){
  4.         //非html5+环境
  5.         return;
  6.     }
  7.     if($.os.ios){
  8.         console.log('ios')
  9.         this.video.removeAttribute('webkit-playsinline');
  10.     }else if($.os.android){
  11.         console.log('android');
  12.         var url = this.video.querySelector('source').src;
  13.         var Intent = plus.android.importClass("android.content.Intent");
  14.         var Uri = plus.android.importClass("android.net.Uri");
  15.         var main = plus.android.runtimeMainActivity();
  16.         var intent = new Intent(Intent.ACTION_VIEW);
  17.         var uri = Uri.parse(url);
  18.         intent.setDataAndType(uri, "video/*");
  19.         main.startActivity(intent);
  20.     }
  21. }

在initEvent中添加点击 全屏 事件

  1. this.vC.querySelector('.fill').addEventListener('tap',function(){
  2.     that.nativeMax();
  3. });

这样做有点鸡肋啊，就不能来点通用的？

确实这个问题我想了一晚上，决定再拿点干货来。

先给个状态，默认为mini播放

  1. var bvd = function(dom) {
  2.     var that = this;
  3.     $.ready(function() {
  4.         //获取视频元素
  5.         that.video = document.querySelector(dom || 'video');
  6.         //获取视频父元素
  7.         that.vRoom = that.video.parentNode;
  8.         //元素初始化
  9.         that.initEm();
  10.         //事件初始化
  11.         that.initEvent();
  12.         //记录信息
  13.         that.initInfo();
  14.         //当前播放模式 false 为 mini播放
  15.         that.isMax = false;
  16.     })
  17. }
  19. //记录信息
  20. pro.initInfo = function() {
  21.     var that = this;
  22.     //在onload状态下，offsetHeight才会获取到正确的值
  23.     window.onload = function(){
  24.         that.miniInfo = {//mini状态时的样式
  25.             width: that.video.offsetWidth + 'px',
  26.             height: that.video.offsetHeight + 'px',
  27.             position: that.vRoom.style.position,
  28.             transform: 'translate(0,0) rotate(0deg)'
  29.         }
  31.         var info = [
  32.                 document.documentElement.clientWidth || document.body.clientWidth,
  33.                 document.documentElement.clientHeight || document.body.clientHeigth
  34.             ],
  35.             w = info[0],
  36.             h = info[1],
  37.             cha = Math.abs(h - w) / 2;
  39.         that.maxInfo = {//max状态时的样式
  40.             width: h + 'px',
  41.             height: w + 'px',
  42.             position: 'fixed',
  43.             transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
  44.         }
  45.     }
  47. }
  49. //全屏 mini 两种模式切换
  50. pro.switch = function() {
  51.     var vR = this.vRoom;
  52.     //获取需要转换的样式信息
  53.     var info = this.isMax ? this.miniInfo : this.maxInfo;
  54.     for(var i in info) {
  55.         vR.style[i] = info[i];
  56.     }
  57.     this.isMax = !this.isMax;
  58. }
  60. //全屏按钮
  61. this.vC.querySelector('.fill').addEventListener('tap', function() {
  62.     //that.nativeMax();
  63.     that.switch();
  64. });

瞧一瞧拉，看一看拉

看起来感觉很不错呢，利用css3的位移和旋转，让视频全屏在了屏幕前，但是问题也随之而来了

  • 播放按钮 以及 控制条 在全屏下 似乎隐藏了，其实是video标签盖在了父元素之上，我们作出相应的调整

css

  1. .bad-video {
  2.     position: relative;
  3.     /*overflow: hidden;*/
  4.     background-color: #CCCCCC;
  5. }

js
max配置当中，设置zIndex值

  1.             that.maxInfo = {//max状态时的样式
  2.                 zIndex:99,
  3.                 width: h + 'px',
  4.                 height: w + 'px',
  5.                 position: 'fixed',
  6.                 transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
  7.             }

  • 横向全屏后，左右滑动事件没有跟着方向改变

  1.         //视频手势右滑动事件
  2.         this.video.addEventListener('swiperight', function(e) {
  3.             console.log('right');
  4.             this.currentTime += 5;
  5.         });
  6.         //视频手势左滑动事件
  7.         this.video.addEventListener('swipeleft', function(e) {
  8.             console.log('left');
  9.             this.currentTime -= 5;
  11.         });

这TM就很尴尬了，难道我全屏后，手机横放，还去上下快进快退？

这时候怎么办呢，不要方

手势滑动事件

我们先给video注册一个事件列表

  1.     var events = {};
  3.     //增加 或者删除事件
  4.     pro.eve = function(ename, callback, isF) {
  5.         if(callback && typeof(callback) == 'function') {
  6.             isF && arguments.callee(ename);
  7.             events[ename] = callback;
  8.             this.video.addEventListener(ename, events[ename]);
  9.             console.log('添加事件：' + ename);
  10.             return;
  11.         }
  12.         var fun = events[ename] || function(){};
  13.         this.video.removeEventListener(ename, fun);
  14.         console.log('删除事件：' + ename);
  15.         return fun;
  16.     }

给video事件添加一个代理来删除添加事件，isF就是在新增这个事件是否删除之前的这个相同的事件，因为添加事件用匿名函数的话，是不能删除的，这样设置一个代理就可以把动态添加的事件记录在events里面，便于操作

这时我们补上修改当前播放进度和音量的功能

  1.     //跳转视频进度 单位 秒
  2.     pro.setCurrentTime = function(t){
  3.         this.video.currentTime += t;
  4.     }
  5.     //设置音量大小 单位 百分比 如 0.1
  6.     pro.setVolume = function(v){
  7.         this.video.volume+= v;
  8.     }

再通过代理给video添加左右上下滑动的事件

  1.         //视频手势右滑动事件
  2.         this.eve('swiperight',function(){
  3.             that.setCurrentTime(5);
  4.         });
  6.         //视频手势左滑动事件
  7.         this.eve('swipeleft', function(e) {
  8.             that.setCurrentTime(-5);
  9.         });
  11.         //视频手势上滑动事件
  12.         this.eve('swipeup',function(){
  13.             that.setVolume(0.2);
  14.         });
  16.         //视频手势下滑动事件
  17.         this.eve('swipedown', function(e) {
  18.             that.setCurrentTime(-0.2);
  19.         });

ok，四个方向的滑动事件已经添加过去了，但这是mini模式播放时的事件，在全屏播放下，四个方向事件并没有跟着video元素方向的改变而改变，这下需要再通过最最最笨的方式判断是否全屏从而触发的事件

  1.         //视频手势右滑动事件
  2.         this.eve('swiperight',function(){
  3.             if(that.isMax){
  4.                 return that.setVolume(0.2);
  5.             }
  6.             that.setCurrentTime(5);
  7.         });
  9.         //视频手势左滑动事件
  10.         this.eve('swipeleft', function() {
  11.             if(that.isMax){
  12.                 return that.setVolume(-0.2);
  13.             }
  14.             that.setCurrentTime(-5);
  15.         });
  17.         //视频手势上滑动事件
  18.         this.eve('swipeup',function(){
  19.             if(that.isMax){
  20.                 return that.setCurrentTime(-5);
  21.             }
  22.             that.setVolume(0.2);
  23.         });
  25.         //视频手势下滑动事件
  26.         this.eve('swipedown', function() {
  27.             if(that.isMax){
  28.                 return that.setCurrentTime(5);
  29.             }
  30.             that.setVolume(-0.2);
  31.         });

怎么样，虽然看起来有点stupid，但是很实用呢

5+客户端全屏解决方案

虽说在5+客户端，android可以调用原生的方式播放，但还是差强人意，我们可以再来看一套解决方案

初始化时，记录mini时的样式，全屏时，通过修改视频宽度为屏幕高度，视频高度修改为视频宽度，再利用5+的屏幕旋转，设置全屏，隐藏状态栏

0)去除手势事件判断

  1. 因为现在是准备改变移动设备的方向，所以，手势方向会跟着设备方向改变

1)去除 css3 旋转以及位移


  2.     //记录信息
  3.     pro.initInfo = function() {
  4.         var that = this;
  5.         //在onload状态下，offsetHeight才会获取到正确的值
  6.         window.onload = function() {
  7.             that.miniInfo = { //mini状态时的样式
  8.                 zIndex: 1,
  9.                 width: that.video.offsetWidth + 'px',
  10.                 height: that.video.offsetHeight + 'px',
  11.                 position: that.vRoom.style.position
  12.             }
  14.             that.maxInfo = { //max状态时的样式
  15.                 zIndex: 99,
  16.                 width: '100%',
  17.                 height: that.sw + 'px',
  18.                 position: 'fixed'
  19.             }
  21.         }
  23.     }

2）该用5+的设置全屏以及隐藏状态栏

  1.     //全屏 mini 两种模式切换
  2.     pro.switch = function() {
  3.         var vR = this.vRoom;
  4.         //获取需要转换的样式信息
  5.         var info = this.isMax ? this.miniInfo : this.maxInfo;
  7.         for(var i in info) {
  8.             vR.style[i] = info[i];
  9.         }
  10.         this.isMax = !this.isMax;
  12.         plus.navigator.setFullscreen(this.isMax);
  13.         if(this.isMax) {
  14.             //横屏
  15.             plus.screen.lockOrientation("landscape-primary");
  16.         } else {
  17.             //竖屏
  18.             plus.screen.lockOrientation("portrait-primary");
  19.         }
  21.     }

3）全屏状态下，android端返回键，触发退出全屏

  1. pro.initEvent = function() {
  2.     //.......省略其他代码
  4.     this.oback = $.back;
  5.         //监听安卓返回键
  6.         $.back = function() {
  7.             if(that.isMax) {
  8.                 that.switch();
  9.                 return;
  10.             }
  11.             that.oback();
  12.         }
  13. }

效果图

5+重力感应切换全屏

嘿嘿，一个在移动端的播放器怎么能少得了 自动切换 横竖屏呢？
在个小节当中就讲了如何手动切换全屏，接下来重力感应切换横屏，需要用到5+的API Accelerometer 加速度感应

  1. 简单说：重力加速度感应可以想象成一个小球在坐标系中
  2. 三个方向上的加速度。永远以手机屏幕为准

啥是加速度？额，就是物理书上的

  1. 手机水平放置向上是y轴正向
  2. 向右是x轴正向，向外是z轴正向

啥是xyz轴？额，就是高数书上的

哎呀，你把手机竖屏正直的放在地上，你人正直走上去，现在你站在你的手机的屏幕上，然后你的右手打开伸直，这就是x轴，你现在看着前面，这就是y轴，你的头顶就是z轴。这样讲明白了不，但是并不是真的要你踩手机，23333

您也可以选择查看其他讲解：Android-传感器开发-方向判断

  1. x,y轴变化：

    手机屏幕向上水平放置时： (x,y,z) = (0, 0, -9.81)
    当手机顶部抬起时： y减小，且为负值
    当手机底部抬起时： y增加，且为正值
    当手机右侧抬起时： x减小，且为负值
    当手机左侧抬起时： x增加，且为正值

  2. z轴的变化：
    手机屏幕向上水平放置时，z= -9.81
    手机屏幕竖直放置时， z= 0
    手机屏幕向下水平放置时，z= 9.81

  3. 屏幕横竖切换条件
    y<=-5时， 切换为竖向
    x<=-5时， 换为横向

ok，我们新增2个方法，用于打开和关闭设备监控

  1.     //开启方向感应
  2.     pro.startWatchAcc = function(){
  3.         var that = this;
  4.         this.watchAccFun = plus.accelerometer.watchAcceleration(function(a) {
  5.                 if(that.getIsMax()){
  6.                     //当前为全屏状态
  7.                     //判断是否满足竖屏Mini状态
  8.                     a.yAxis>=5 && that.setIsMax(false);
  9.                 }else{
  10.                     //当前为Mini状态
  11.                     //判断是否满足全屏Max状态
  12.                     Math.abs(a.xAxis) >=5 && that.setIsMax(true);
  13.                 }
  14.             }, function(e) {
  15.                 //出错了大不了 不自动旋转呗  让它手动 切换
  16.                 console.log("Acceleration error: " + e.message);
  17.                 that.clearWatchAcc();
  18.             },{
  19.                 frequency:1200
  20.             });
  21.     }
  22.     //关闭方向感应
  23.     pro.clearWatchAcc = function(){
  24.         this.watchAccFun && plus.accelerometer.clearWatch(this.watchAccFun);
  25.     }

然后在初始化的时候默认打开方向监控

  1.     var bvd = function(dom) {
  2.         var that = this;
  3.         $.ready(function() {
  4.             //...
  5.         })
  7.         $.plusReady(function() {
  8.             that.startWatchAcc();
  9.         })
  11.     }

再把横向全屏改为，可双向横屏

真机调试看看

嘿嘿，我们再给全屏播放时添加一个锁定按钮，让设备不监控 重力感应，也不响应视频的点击播放暂停事件

先做一个锁定按钮

当然，锁定图片，地址也改成用base64，最好也用js动态生成标签

设置它的基本样式，靠右，上下垂直居中，默认隐藏

  1.         .lock {
  2.             padding: .3rem;
  3.             width: 3rem;
  4.             height: 3rem;
  5.             position: absolute;
  6.             right: .5rem;
  7.             top: 50%;
  8.             transform: translateY(-50%);
  9.             -webkit-transform: translateY(-50%);
  10.             visibility: hidden;
  11.         }

好，我们来整理一下逻辑，

1）默认在mini播放时，lock隐藏
2）全屏播放时，lock显示，但是也会跟着控制条 在4s内向右隐藏
3）全屏暂停时，lock也跟着控制条 一直显示
4）点击lock锁定时，提示已锁定，控制条立即隐藏，lock4s内向右隐藏，视频点击事件更换为显示lock图标，android返回键事件改为不做任何，关闭重力监控
5）点击lock解锁时，提示已解锁，android返回键改为 切换为mini状态，开启重力监控

我擦，其实做起来还是挺郁闷的，主要是逻辑处理比较痛苦

0）添加一个向右移动的动画，3s延迟后 1s内 执行完动画

  1. @keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}
  3. webkit-keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}
  5. .lockhidden {
  6.     animation: lockhide 1s 3s linear;
  7.     -webkit-animation: lockhide 1s 3s linear;
  8.     animation-fill-mode:forwards;
  9.     -webkit-animation-fill-mode: forwards;
  10. }

1）全屏时显示lock

  1.     pro.switch = function() {
  2.         //...
  3.         //全屏时 显示锁定 图标
  4.         this.vlock.style.visibility = this.isMax ? 'visible' : 'hidden';
  6.     }

2)全屏播放时，lock显示，但是也会跟着控制条 在4s内向右隐藏
我们在播放时添加lock的隐藏动画，

3）全屏暂停时，lock也跟着控制条 一直显示

4）点击lock锁定时，提示已锁定，控制条立即隐藏，lock4s内向右隐藏，视频点击事件更换为显示lock图标，android返回键事件改为不做任何，关闭重力监控
5）点击lock解锁时，提示已解锁，android返回键改为 切换为mini状态，开启重力监控

  1.     //锁定屏幕
  2.     pro.lockScreen = function() {
  3.         $.toast('锁定屏幕');
  4.         var that = this;
  5.         //更换video点击事件为 显示 lock图标，并保存 video之前的事件
  6.         this.videoTapFn = this.eve('tap', function() {
  7.             that.lockT = setTimeout(function(){
  8.                 that.vlock.classList.add('lockhidden');
  9.             },500);
  10.                 //重新开始播放样式
  11.             that.vlock.classList.remove('lockhidden');
  12.             that.vlock.style.visibility = 'visible';
  13.         }, true);
  14.         //隐藏控制条
  15.         this.vC.style.visibility = 'hidden';
  16.         //给Lock图标增加 隐藏样式类
  17.         this.vlock.classList.add('lockhidden');
  18.         //锁定屏幕时，不监控重力感应
  19.         this.clearWatchAcc();
  20.         //标识当前更改的Lock状态
  21.         this.isLock = true;
  23.     }
  25.     //解锁屏幕
  26.     pro.unlockScreen = function() {
  27.         $.toast('解锁屏幕');
  28.         //替换回video之前的点击事件
  29.         this.eve('tap', this.videoTapFn, true);
  30.         //给Lock图标清楚 隐藏样式类
  31.         this.vlock.classList.remove('lockhidden');
  32.         //不锁定屏幕时，监控重力感应
  33.         this.startWatchAcc();
  34.         //标识当前更改的Lock状态
  35.         this.isLock = false;
  36.     }

666）最后给我们亲爱的lock图标增加一枚抚摸事件，以及android返回键的事件更改

  1.         //全屏 时 锁定点击事件
  2.         this.vlock.addEventListener('tap', function() {
  3.             if(that.isLock) {
  4.                 that.unlockScreen();
  5.                 return;
  6.             }
  7.             that.lockScreen();
  8.         });
  10.         this.oback = $.back;
  11.         //监听安卓返回键
  12.         $.back = function(){
  13.             if(that.isMax){
  14.                 if(!that.isLock){
  15.                     //全屏状态下 按下返回键 时，1s内不监控重力，防止返回Mini状态时和重力感应并发事件
  16.                     setTimeout(function(){
  17.                         that.startWatchAcc();
  18.                     },1000);
  19.                     that.clearWatchAcc();
  20.                     that.switch();
  21.                 }
  22.                 return;
  23.             }
  24.             that.oback();
  25.         }
  26.     }

好了！本文5+全屏demo 源码地址

写博客不易，但是那种分享的心情是很不错的，何尝不是另一种温习和进步呢？

谢谢各位。

本文相关文章：H5打造属于自己的视频播放器 专栏

H5打造属于自己的视频播放器（JS篇2）的更多相关文章

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. Chimee - 简单易用的H5视频播放器解决方案

    Chimee是由奇舞团开源的一套H5视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造.Chimee支持MP4.M3U8.FLV等多种媒体格式,同时它也帮我们解决了 ...

  3. H5视频播放器属性与API控件，以及对程序的解释

    一:理论 1.视频播放器的格式介绍 视频主要有三部分组成:视频.音频.编码格式 视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video ...

  4. 让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案

    Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...

  5. HTML5+CSS3+JQuery打造自定义视频播放器

    来源:http://www.html5china.com/HTML5features/video/201109206_1994.html 简介HTML5的<video>标签已经被目前大多数 ...

  6. Video.js web视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

  7. 记一个视频播放器插件 video.js

    最近在看扣丁学堂上面的一些视频, 突然对他用的视频播放器有点兴趣, 他也是采用的 ts切片播放, 如果使用传统的video标签是无法实现的 他使用的插件叫做 video.js 官网地址 官网提供的播放 ...

  8. video.js视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

  9. 使用CSS3+JQuery打造自定义视频播放器

    简介 HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发 ...

随机推荐

  1. 走进第四范式：决策类AI企业的生存之道

    根据不同的应用领域,人工智能行业可以分为视觉类人工智能.语音及语义类人工智能和决策类人工智能. 通常,我们接触的都是视觉类.语音类的人工智能,它们主要用来帮助人类执行具体任务,例如人脸识别,语音控制等 ...

  2. Python:Python2和3不同print汉字方式

    Python3: 可以直接通过print('你好')输出 Python2: 需在开头加#encoding=UTF-8 不过之前输出的时候即使加了开头一行,也是一些混乱的汉字,一看就知道编码错误,后来我 ...

  3. Windows Service 安装、启动和卸载

    win+R输入cmd,以管理员身份运行cmd: 安装: 1.cd C:\Windows\Microsoft.NET\Framework\v4.0.30319   回车 2.输入(InstallUtil ...

  4. OA办公软件篇（一）—组织架构

    OA办公软件篇(一)-组织架构 背景 作用 迭代历程 具体实现 写在最后   背景 在说组织架构之前,我们先来说说OA本身. 百度百科解释OA为:办公自动化(Office Automation,简称O ...

  5. 当.Net撞上BI可视化，这3种“套路”你必须知道

    最近葡萄在做技术支持,又遇到了客户给我们出的新问题. 事情是这样的. 这次客户使用的是.Net项目,直接做BI大屏过于复杂,所以想直接集成使用BI数据可视化分析大屏. 所以,这次我们就从--Wyn出发 ...

  6. SQL常用数据类型 字段约束

    SQL中的常用数据类型: 整数:int 小数:double 字符串:varchar(长度),建议 用2的整数倍 日期:date 格式: 'YYYY-MM-DD' SQL中的约束: a.主键约束:pri ...

  7. LGP3244题解

    考虑正常 DAG 的有向生成树的方案数. 很明显发现,每个节点只需要挑一个父亲即可.方案数为 \(\prod_{i=2}^nd[i]\). 再考虑加上新边后新增的 DAG 数量. 将点分为两类.假设这 ...

  8. 做一个能对标阿里云的前端APM工具（上）

    APM 全称是 Application Performance Monitor,即性能监控 这篇文章有三个前提: 从产品形态上看这肯定不是一个能够媲美阿里产品的竞品,所以抱歉我碰瓷了.你可以把这里的阿 ...

  9. Net之线程池的优点

     使用线程池的好处:     1.减少在创建和销毁线程上所花的时间以及系统资源的开销     2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".

  10. JavaWeb 05_JDBC入门及连接MySQL

    一.概念 *概念:  Java DataBase Connectivity       Java数据库连接, Java语言操作数据库* JDBC本质:其实是官方(sun公司)定义的一套操作所有关系型数 ...