H5视频播放，左右滑手势控制播放进度。

最新推荐文章于 2024-07-25 16:22:07 发布
最新推荐文章于 2024-07-25 16:22:07 发布
阅读量5.9k 收藏 9
点赞数
分类专栏： 前端开发 文章标签： css 视频 h5视频 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37231097/article/details/74452295
版权

水平有限，这篇文章中对H5视频播放做了简单的搭建。因产品经理要求，加入了手势控制，左滑后退播放10秒，右滑快进10秒。因为上下滑动可能会影响页面的滑动，如果用到iscroll或者batterscorll等插件更需要小心谨慎。固未添加控制音量的上下滑动事件。

下面这段代码主要是css部分和一个video标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>视频进度条</title>  
    <script src="js/jquery.js"></script>
    <script src="js/index.js"></script>
    <style type="text/css">
        #box{
            width: 100%;
            position: relative;
            background: rgba(0,0,0,.5);
            color: white;

        }
        video{
            width: 100%;height: 100%;
        }
        .list_menu{width: 100%;height: 30px;position: relative;}
        #play{
            position: absolute;bottom: 5px;left: 3px;
            width: 25px;
            height: 25px;

        }
        #volume{
            position: absolute;bottom: 5px;right:25px;
            width: 25px;
            height: 25px;
            }
        #cur_time{
            position: absolute;bottom: 8px;left: 30px;

        }
        #total_time{
            position: absolute;bottom: 8px;left: 270px;

        }

        #time_line ,#volume_line{
            -webkit-appearance: none;
            width: 200px;
            position: absolute;
            top: 10px;
            left: 60px;
        }
        #volume_line{
            position: absolute;top: -30px;left: 300px;width: 80px;transform: rotate(-90deg ) ;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }    
        input[type=range]::-webkit-slider-runnable-track {
            height: 1px;

            /*box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; 轨道内置阴影效果*/
        }
        input[type=range]:focus {
            outline: none;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 10px;
            width: 10px;
            margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
            background: #ffffff; 
            border-radius: 50%; /*外观设置为圆形*/
            border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
            box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
        }
        #volume_line{

        }

    </style>
</head>
<body>
<div id="box">
    <!--controls API控制;autoplay 自动播放-->
    <video src="http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4" id="video"></video>
    <div class="list_menu">
        <img src="img/pause.png" alt="" id="play">
        <span id="cur_time">0</span><span id="total_time">0</span>
        <input type="range" max="0" min="0" value="0" id="time_line">
        <img src="img/vol.png" alt="" id="volume">
        <input type="range" id="volume_line">
       <!-- <img src="img/fullScreen.png" alt="" id="fullScreen">-->
    </div>
</div>
</body>
</html>

下面这段代码主要是一些视频播放的控件，最基本的一些操作，暂停，播放，音量，全屏等。

var
        oBox = $('#box')[0],
        oVideo = $('#video')[0],
        oPlay = $('#play'),
        oVolume = $('#volume'),
        oTotalTime = $('#total_time'),
        oCurTime = $('#cur_time'),
        oTimeLine = $('#time_line'),
        oVolumeLine = $('#volume_line'),
        oFullScreen = $('#fullScreen'),
        iCurVol = 0.5,
        isfullScreen = false,
        isVolume = false,
        isPlay = false;

    /*初始化页面*/
    oVideo.volume  = iCurVol;
    oVolumeLine.val(iCurVol * 100);
    //oTotalTime.html(parseInt(oVideo.duration/60)+":"+(Math.ceil(oVideo.duration))%60);   
    //setTimeout("oTotalTime.html(Math.ceil(oVideo.duration))",1000)
    oTimeLine.attr('max',Math.ceil(oVideo.duration));
    setTimeout(function(){oTotalTime.html(parseInt(oVideo.duration/60)+":"+(Math.ceil(oVideo.duration))%60)},100);


    /*点击播放/暂停*/
    oPlay.click(function () {
        if(isPlay){
            oVideo.pause();
            $(this).attr('src','img/pause.png');
        }else{
            oVideo.play();
            $(this).attr('src','img/play.png');
        }
        isPlay = ! isPlay;
    });
    /*改变视频播放的进度条*/
    oVideo.addEventListener('timeupdate',playTime,true);

    /*视频进度条的点击事件*/
    oTimeLine.bind("touchstart",function(){
        oVideo.removeEventListener('timeupdate',playTime,true)
    }).bind("touchend",function(){
        oVideo.currentTime = $(this).val();
        oVideo.addEventListener('timeupdate',playTime,true)
    });

    function playTime(){
        var
            iCurTime = Math.ceil(oVideo.currentTime);

        if(iCurTime<=60){oCurTime.html(iCurTime);}else{
            oCurTime.html(parseInt(iCurTime/60)+":"+(Math.ceil(iCurTime))%60);
        }
        oTimeLine.val(iCurTime)
    }

    // 静音
    oVolume.bind("touchstart",function(){
        if(isVolume){
            oVideo.volume = iCurVol;
            oVolumeLine.val(iCurVol * 100);
            oVolume.attr('src','img/vol.png');
        }else{
            oVideo.volume = 0;
            oVolumeLine.val(0);
            oVolume.attr('src','img/novol.png');
        }
        isVolume = ! isVolume;
    });

    /*点击音量滚动条*/
    oVolumeLine.change(function () {
        oVideo.volume = oVolumeLine.val() / 100;
        oVolume.attr('src',$(this).val() == 0 ? 'img/novol.png' : 'img/vol.png' );//使用三木运算
    });

    /*点击全屏/正常*/
    oFullScreen.click(function () {
        if(isfullScreen){
            document.mozCancelFullScreen();//兼容火狐
            oBox.style.width = '600px';
        }else{
            oBox.mozRequestFullScreen();
            oBox.style.width = '1000px';
        }
        isfullScreen = !isfullScreen;
    });

下面这段代码是左右滑动的控制，各位观众可以手动调节到需要的秒数。代码简单，欢迎搬运。

(function(){

        var LSwiperMaker = function(o){ 

            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;

            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);

        }

        LSwiperMaker.prototype.start = function(e){

             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
             //document.getElementById("start").innerHTML = "开始位置是:"+this.sPos.x +" "+ this.sPos.y ;

        }
        LSwiperMaker.prototype.move = function(e){  

            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
            //document.getElementById("move").innerHTML = "您的位置是："+this.mPos.x +" "+ this.mPos.y ;

        }

        LSwiperMaker.prototype.end = function(e){

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

            this.control = false;
            this.config.backfn(this);

        }

        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突

    }())

    var a = new LSwiperMaker({
            bind:document.getElementById("video"),  // 绑定的DOM对象
            dire_h:true,     //true 判断左右， false 判断上下
            backfn:function(o){    //回调事件
                // document.getElementById("dire").innerHTML = "向"+ o.dire + "滑"; 
                 if(o.dire=="R"){
                    console.log("R");
                    oVideo.currentTime = oVideo.currentTime+5;

                    //this.currentTime += 5;
                    }else if(o.dire=="L"){

                        oVideo.currentTime = oVideo.currentTime-5;

                        //this.currentTime -= 5;
                        }
            }
    })
风中乘凉
关注
专栏目录
html5手势滑动实现（单点）
td_Hao的博客
04-30 2413
        html 中有5个触屏事件，可去 http://www.w3school.com.cn，进行查阅。本文使用原生态的js实现单点触摸的手势操作         实现原理很简单，使用touchstart 和 touchend 事件，获取手指滑动时的起始坐标(x1,y1)、终点坐标(x2,y2)，通过该两点的计算，可以判断出手势的活动方向，来触发对应的事件。         实现代码...
h5手动滑动进度条效果（移动端）
热门推荐
leileibrother的博客
11-30 1万+
公司项目需要在手机上做手动滑动进度条的效果（移动端），自己琢磨了一下，用原生js和h5的touchmove事件写了这个效果，可以参考一下，先看看效果图。 红色的圆点可以在黑色区域任意滑动。全部代码如下： 手动滑动进度
H5页面实现滑动控制音频播放
weixin_33796205的博客
02-26 1632
一、业务场景 微信中打开H5页面，滑动页面，滑动到指定位置区间，播放对应的音频，上下滑动页面，可快速切到对应的音频，然后播放。 二、实现方法 1、原理介绍 首先计算出设计图的总高度，然后标注设计图上的音频切换点，算出切点所在的高度在整个设计图高度中所占的比例，最后根据比例算出实际页面中切点的高度。 //切点配置信息 let scrollConfigInfo = [{ top: 0, ...
Javascript 实时记录视频播放进度，防止观看作弊
qq_26631337的博客
07-25 760
上面实现了一个简单的基于原生video的具有动态颜色的进度条，可以有效地记录在视频中的观看进度。可以在上面的基础上拓展：比如原生标签用其他的播放器代替（DPlayer等），可能相应的监听时间需要做修改。比如将记录通过后台接口将记录写入在数据库，下次播放时读取记录继续播放等。
H5短视频滑动播放video
05-08 1万+
用户下滑，加载新的视频播放，上滑看历史页面。1、布局，     手势下上滑要整体上下滑动，滑动距离不够，需要自动回退到初始播放页面，滑动大于最小距离，则需要翻页。      使用&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;...&lt;/ul&gt; ul{ width:100%; transform:translateY(0) } l...
直播平台源代码，纯JS实现左右滑动轮播图
云豹网络科技
05-18 379
为小圆点添加监听事件，当鼠标放在圆点上时，调用clearTimeout()方法停止轮播，调整计时器参数到固定值，使左右边距加减的滑动效果转为直接跳转到对应图片的效果，并在鼠标移出时重新启动轮播setTimeout()利用右外边距或左外边距的加减来操作整个放有图片div的移动，同时利用setTimeout()函数和计时器实现自动切换，从而达到图片无缝切换的效果。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。以上就是直播平台源代码，纯JS实现左右滑动轮播图， 更多内容欢迎关注之后的文章。
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
9. **手势控制**：支持滑动调节音量和进度，提升用户操作便捷性。 在实际开发中，开发者需要根据具体需求配置uni-app-video的属性，如src（视频源）、controls（是否显示默认控制栏）、autoplay（是否自动播放）等...
自定义漂亮的视频播放的进度条或时间尺
u013254241的专栏
08-07 1413
自定义漂亮的视频播放进度条样式，时间过长支持左右滑动，同时还支持给某个时间段设置一个漂亮的标记图
h5物体拖动_【点我解锁】11种网易爆款H5交互手势及案例
weixin_39625162的博客
12-20 805
本文3078字在早些年，H5其实更像是手机上的PPT，只支持点击、滑动这些基础手势操作。以内容展示为主，交互形式为辅。但到了今天，H5的玩法已经有了质的突破。不仅交互形式超多，形式与内容也能紧密结合，产生1+1大于2的效果。本期我们就来汇总一下当下最热门的H5交互手势～单击交互点击是最常见的手势之一，可以用在页面转场上。这种交互手势，一般需要设置点击引导。引导可以作为注释帮助用户理解H5...
uniapp实现一个视频自动播放用户不能手动快进后退 视频播放完成后才能进行答题
最新发布
09-10
在uniapp（微信小程序、H5、App等统一的开发框架）中，要实现视频自动播放并且禁止用户手动操作快进、快退，你可以按照以下步骤： 1. **设置视频组件**： 使用uni-app内置的`video`组件，并设置`autoplay="true"`...
uniapp小程序模仿抖音视频
09-11
- 在uniapp中，可以使用`<video>`组件来展示和控制视频播放。通过设置`src`属性加载视频源，`controls`属性启用默认的控制条。 - 可以通过`play()`、`pause()`、`stop()`等方法进行播放控制，`currentTime`属性可...
移动端可拖动的Html5播放器
10-24
封装的移动端Html5播放器，可以左右滑动快进，快退，上下滑动音量增减，全屏退出全屏，暂停播放等功能
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
HTML5视频播放器随页面滚动固定页面右下角效果
12-12
这是一款可以自动将HTML5视频播放器在页面向下滚动时，将其固定在页面右下角位置的jquery和CSS3效果。
纯代码自定制视频播放器AVPlayer；可切换播放资源；实现缓冲条，拖动快进快退功能；
03-18
纯代码自定制视频播放器AVPlayer；可切换播放资源；实现缓冲条，拖动快进快退功能；
仿抖音滑动小短剧影视微信小程序源码包含前端+后端+数据库
04-08
仿抖音滑动小短剧影视微信小程序源码，带支付收益等模式、支持无限滑动;高性能滑动、预加载、视频预览，支持剧情介绍，集合壁纸另外仿抖音滑动效果;支持会员模式，支持用户单独购买等等多功能 丰富的后台设置，具体大家可以看小编的后台演示图，大家可以自行下载搭建研究前端支持抖音、快手、百度、H5和微信小程序，需要哪个端就发行到哪个端即可。
H5随机短视频滑动版带打赏源码，可封装APP软件或嵌入式观看
11-25 317
H5随机短视频滑动版带打赏源码，可封装APP软件或嵌入式观看-bt博客-bt资源博客优秀教程源码分享网站H5随机短视频滑动版带打赏源码，可封装APP软件或嵌入式观看，网站引流必备源码！数据来源抖音和快手官方短视频链接，无任何违规内容！可自行添加广告等等！手机端完美支持滑动屏幕观看（向上或向右）滑动，将会自动播放下一个视频！或点击左边开启连续自动播放下一个视频（默认自动播放下一个视频）将源码上传到虚拟空间解压缩即可，支持上传二级目录访问，（ks.txt）为存储短视频源链接，可自行增加或修改。
使用SurfaceView播放视频，调节进度，滑动屏幕调节音量并显示音量。
用心去专研技术，用代码改变世界__ Mr.Wang
06-06 4945
效果展示： 首先在清单文件中注册： <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> java代码： public class MainActivity extends AppCompatActivity implements SurfaceHolder.Callback { priv
js实现视频的播放、暂停、静音、加速、减速、快进、后退、拖动进度条改变音量、显示视频进度
php的绯闻女友
03-26 7358
话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li { background-color: white; width: 50px; height: 3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值