网页播放器（如DPlayer）播放器H5页面实现视频全屏播放滑动操作(滑动快进，滑动音量增减)

 

官方文档：https://dplayer.diygod.dev/zh/guide.html#%E5%8F%82%E6%95%B0

 

• abort 视频终止加载
• canplay 提示该视频已准备好开始播放
• canplaythrough 提示视频能够不停顿地一直播放：
• durationchange 视频的时长已改变
• emptied 重置为初始状态下触发
• ended 视频播放结束后触发
• error 获得视频的错误状态：
• loadeddata 视频加载完后才出现
• loadedmetadata 提示音频的元数据已加载：
• loadstart 提示视频已开始加载：
• mozaudioavailable 当音频数据缓存并交给音频层处理时
• pause 事件在音频/视频(audio/video)暂停时触发。
• play 事件在音频/视频(audio/video)开始播放时触发。
• playing 事件在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发。
• progress 浏览器正在下载指定的音频/视频时，会发生 progress 事件
• ratechange 事件在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式)。
  该事件通过音频/视频(audio/video)的playbackRate属性调用，用于设置或返回音频/视频(audio/video)的播放速度。
• seeked 事件在用户已移动/跳跃到音频/视频（audio/video）中的新位置时触发。
• seeking 事件在用户开始移动/跳跃到新的音频/视频（audio/video）播放位置时触发。
  **提示：**seeking 事件的相反事件为seeked事件。
  **提示：**使用 Audio/Video 对象的currentTime属性获取播放位置。
• stalled 事件在浏览器尝试获取媒体数据，但数据不可用时触发。
• suspend 事件在浏览器刻意不加载媒体数据时触发。
• timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
  该事件可以在以下情况被调用: 1播放音频/视频（audio/video） 2移动音频/视频（audio/video）播放位置
  **提示：**timeupdate 事件通常与 Audio/Video 对象的currentTime属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）
• volumechange 事件在音频/视频（audio/video）的音量发生改变时触发。
• waiting 事件在视频由于需要缓冲下一帧而停止时触发。

 

duration：是视频时长

 

player.on('fullscreen', function() {
            
                $("body").on("touchstart", function(e) {
                //e.preventDefault();
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
                
                });
                $("body").on("touchmove", function(e) {
                //e.preventDefault();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;
                 
                if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                    //表示向右滑动 
                    var currentTime=window.player.video.currentTime
                    currentTime=currentTime+10;
                    if (duration>0 && currentTime>duration) {
                        currentTime=duration;
                        return;
                    }
                    player.seek(currentTime)
                //    console.log(Math.abs(X)-Math.abs(Y));
                    
                }
                else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                    //表示向左滑动
                    var currentTime=window.player.video.currentTime
                    currentTime=currentTime-10;
                    if (currentTime<0) {
                        currentTime=0;
                        return;
                    }
                    //console.log(currentTime);
                    window.player.seek(currentTime);
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                    //表示向下滑动
                    volume=volume-0.01
                    if (volume<0) {
                        volume=0;
                        return;
                    }
                    //console.log( Math.abs(Y)-Math.abs(X));
                    player.volume(volume, true, false);
                    
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                    //表示向上滑动
                    volume=volume+0.01
                    if (volume>100) {
                        volume=100;
                        return;
                    }
                   player.volume(volume, true, false);
                }
                });
                
                
             
        });
        
        player.on('fullscreen_cancel', function() {
          
              
              $("body").unbind("touchstart");
              $("body").unbind("touchmove");
              $("body").unbind("click");
            
        
        });

 

 

简单来说就是全屏（也可以是播放器所在div）的事件监听滑动操作（理论上网页播放器只要有对应的音量调整、视频指定点播放、获取当前播放时间都可以使用），具体需求可以根据自己的来