网页播放器(如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)的事件监听滑动操作(理论上网页播放器只要有对应的音量调整、视频指定点播放、获取当前播放时间都可以使用),具体需求可以根据自己的来

 

posted @   yvioo  阅读(4440)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2022-01-07 谷歌浏览器访问报错: in more-private address space `local`.
点击右上角即可分享
微信分享提示