用JavaScript实现视频的播放暂停音量时长及大屏的控制

最新推荐文章于 2022-06-22 12:25:22 发布
最新推荐文章于 2022-06-22 12:25:22 发布
阅读量1.3k 收藏 5
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40765552/article/details/89609465
版权

达到效果
在这里插入图片描述
且点击放大键可以放大
在这里插入图片描述
首先在HTML中建立：

    <link rel="stylesheet" href="css/css07.css">//关联css样式
    <link rel="stylesheet" href="tubiao07/iconfont.css">//视频中的图标都是用的iconfont
</head>
<body>

<div class="bk" id="bk">
    <video id="myv" class="myc"   width="600" height="400" >
    </video>
        <div class="bg" id="bg">
            <!-- 进度 -->
            <div id="total" class="total">
              <div id="current" class="current"></div>
            </div>
            <!-- 进度  end-->
            <!-- 控制区 -->
                <span class="iconfont icon-ai10" id="ai10"></span>
                <div id="zt">
                <span class="iconfont icon-zanting" id="zanTing"></span>
                <span class="iconfont icon-bofang" id="boFang"></span>
                </div>
                <span class="iconfont icon-ai09" id="ai09"></span>
                <span class="currentTime" id="currentTime">00:00</span>
                <span class="totalTime" id="totalTime">00:00/</span>
            <!-- 控制区 end -->
            <!-- 音量 -->
                <div id="yl">
                <span class="iconfont icon-yinliang" id="yinLiang"></span>
                <span class="iconfont icon-jingyin" id="jingYin"></span>
                </div>
                <div class="vBox" id="vBox">
                    <div class="pBox" id="pBox"></div>
                </div>
                <span class="iconfont icon-suofang" id="suoFang"></span>
            <!-- 音量 end -->
        </div>
</div>
<script src="js/js07.js"></script>
</body>

css样式

/* public CSS*/
*{
    margin: 0;
    padding: 0;
}
ul,li,ol{list-style: none;}
img {border: none;}
/* public CSS  end*/
.bk{
    background-color: black;
    width: 600px;
    height: 500px;
    margin: 0 auto;
    padding: 0;
    opacity: 0.8;
}
.myc{
    /*margin-left: 20px;*/
    margin-top: 20px;
    /*opacity: 1;*/
}
.bg{
    width: 600px;
    height: 40px;
    background-color:#999999;
    opacity: 0.3;
    /*margin-left: 20px;*/
    margin-top: 36px;
    position: relative;

}
.total{
    width: 600px;
    height: 5px;
    background-color:#F2FAFF;
    opacity: 0.8;
    border-radius: 5px;
    position: absolute;
}
.current{
    /*width: 0px;*/
    height: 5px;
    background-color: pink;
    /*opacity: 0.5;*/
    position: absolute;
}

.icon-ai10{
    position: absolute;
    top:10px;
    left: 10px;
}
.icon-bofang{
   position: absolute;
    top:10px;
    left: 42px;
    display: block;
    /*overflow: hidden;*/
    /*display: none*/
}
.icon-zanting{
    position: absolute;
    top:10px;
    left: 40px;
    display: none;
    /*display: block;*/
}
.icon-ai09{
    position: absolute;
    top:10px;
    left: 70px;
}
.totalTime{
    font-size: 14px;
    position: absolute;
    top: 12px;
    left: 100px;
}
.currentTime{
    font-size: 14px;
    position: absolute;
    top: 12px;
    left: 145px;
}
.icon-yinliang{
    position: absolute;
    top: 10px;
    left: 450px;
}
.icon-jingyin{
    position: absolute;
    top: 10px;
    left: 450px;
    display: none;
}
.vBox{
    width: 50px;
    height: 5px;
    background-color: #F2FAFF;
    /*position: absolute;*/
    /*top: 18px;*/
    /*left: 480px;*/
    position: absolute;
    top: 17px;
    left: 480px;

}
.pBox{
    width: 25px;
    height: 5px;
    background-color: pink;
    position: absolute;
    /*top: 5px;*/
    /*left: -500px;*/
}
.icon-suofang{
    position: absolute;
    top: 10px;
    left: 550px;
}

js实现：

{

    let myv=document.getElementById("myv");
    console.info(myv);
    let boFang=document.getElementById("boFang");
    let zanTing=document.getElementById("zanTing");
    let zt=document.getElementById("zt");
    let totalTime=document.getElementById("totalTime");
    let total=document.getElementById("total");
    let current=document.getElementById("current");
    let currentTime=document.getElementById("currentTime");
    let vBox=document.getElementById("vBox");
    console.info(vBox);
    let pBox=document.getElementById("pBox");
    let yinLiang=document.getElementById("yinLiang");
    let jingYin=document.getElementById("jingYin");
    let yl=document.getElementById("yl");
    let suoFang=document.getElementById("suoFang");
    let ai10=document.getElementById("ai10");
    let ai09=document.getElementById("ai09");
    let bk=document.getElementById("bk");
    let bg=document.getElementById("bg");
    console.info(yl);

    //初始化
    // console.info("myc");
    // myv.volume = 0.5;
    // // 加载第一个视频
    let i=0;
    let s=["video/cloud.mp4","video/north.mp4","video/cloud.mp4"];
    let p=["video/cloud_img.png","video/north_img.png","video/cloud_img.png"];
    myv.src = s[0];//初始化视频
    myv.poster = p[0];//初始化视频中显示的图片
    // myv.play();

    //播放控制
    zt.addEventListener("click", function () {
        if( myv.paused ){
            myv.play();
            boFang.style.display="none";
            zanTing.style.display="block";
        }
        else{
            myv.pause();
            boFang.style.display="block";
            zanTing.style.display="none";
        }
    });
    myv.addEventListener("click",function () {
        if( myv.paused ){
            myv.play();
            boFang.style.display="none";
            zanTing.style.display="block";
        }
        else{
            myv.pause();
            boFang.style.display="block";
            zanTing.style.display="none";
        }
    });
    //时长控制
    myv.addEventListener("loadedmetadata",function () {
        let shi=parseInt((myv.duration%3600)/60);
        let miao=Math.ceil(myv.duration%60);
        (shi<10)&&(shi="0"+shi);
        (miao<10)&&(miao="0"+miao);
        totalTime.innerHTML = parseInt((myv.duration)/3600)+":"+ shi+":"+ miao+"/";
        if(parseInt((myv.duration)/3600)===0){
            totalTime.innerHTML=shi+":"+ miao+"/";
        }
    });
    myv.addEventListener("timeupdate",function () {
        let cshi=parseInt((myv.currentTime%3600)/60);
        let cmiao=Math.ceil(myv.currentTime%60);
        (cshi<10)&&(cshi="0"+cshi);
        (cmiao<10)&&(cmiao="0"+cmiao);
        currentTime.innerHTML=parseInt((myv.currentTime)/3600)+":"+cshi+":"+ cmiao;
        if(parseInt((myv.currentTime)/3600)===0){

            currentTime.innerHTML=cshi+":"+cmiao ;
        }
        // total.innerHTML = 100*myv.currentTime/myv.duration + "%";
        current.style.width = 100*myv.currentTime/myv.duration +"%";
    });
    //时长拖动
    total.addEventListener("mousemove",function () {
        total.style.height= 20 +"px";
        current.style.height=20 +"px";
        total.style.top="-"+ 15+"px";
        current.style.top="-"+ 0+"px";
    });
    total.addEventListener("mouseleave",function () {
        total.style.height= 5 +"px";
        current.style.height=5 +"px";
        total.style.top=0 +"px";
        current.style.top=0 +"px";
    });
    let mMove = function(){
        let mx = event.offsetX;
        current.style.width =mx +"px";
        myv.currentTime = 100 * mx /myv.duration +"%";
    };
    total.addEventListener("mousedown", function () {
        let  mouseX = event.offsetX ;
        current.style.width = mouseX+"px";
        myv.currentTime = mouseX /total.offsetWidth * myv.duration;
        total.addEventListener("mousemove",mMove);
        currentTime.innerHTML=parseInt((myv.currentTime)/3600 )+":"+ parseInt((myv.currentTime%3600)/60)+":"+ Math.ceil(myv.currentTime%60);
        if(parseInt((myv.currentTime)/3600)<10){
            currentTime.innerHTML=parseInt((myv.currentTime%3600)/60)+":"+ "0"+Math.ceil(myv.currentTime%60);
        }
    });
    total.addEventListener("mouseup",function(){
        total.removeEventListener("mousemove",mMove);
    });
    total.addEventListener("mouseleave",function(){
        total.removeEventListener("mousemove",mMove);
    });

    // 音量控制
    let mYin = function(){
        let mx = event.offsetX;
        pBox.style.width = mx + "px";
        myv.volume = mx / 50 ;
    };
    vBox.addEventListener("mousedown",function(){
        if(yinLiang.style.display==="block"){//如果是静音就不能拖动音量条
            let  mouseX = event.offsetX ;
            pBox.style.width = mouseX + "px";
            myv.volume = mouseX / 50 ;
            vBox.addEventListener("mousemove",mYin);
        }
        else {
            myv.volume=0;
        }
    });
    vBox.addEventListener("mouseup",function(){
        if(yinLiang.style.display==="block") {//如果是静音就不能拖动音量条
            vBox.removeEventListener("mousemove", mYin);
        }
        else {
            myv.volume=0;
        }
    });
    vBox.addEventListener("mouseleave",function(){
        if(yinLiang.style.display==="block") {//如果是静音就不能拖动音量条
            vBox.removeEventListener("mousemove", mYin);
        }
        else {
            myv.volume=0;
        }
    });
    //静音的实现
    yl.addEventListener("click",function () {
        if(myv.volume!==0) {
            yinLiang.style.display = "none";
            jingYin.style.display = "block";
            myv.volume = 0;
        }
        else {
            yinLiang.style.display="block";
            jingYin.style.display="none";
            myv.volume=0.5;
        }

    });
    //缩放的实现
    function FullScreen() {
        if (myv .requestFullscreen) {
            myv .requestFullscreen();
        } else if (myv .mozRequestFullScreen) {
            myv .mozRequestFullScreen();
        } else if (myv .webkitRequestFullScreen) {
            myv .webkitRequestFullScreen();
        }
    }
    function exitFullscreen() {
        if (myv.exitFullscreen) {
            myv.exitFullscreen();
        } else if (myv.mozCancelFullScreen) {
            myv.mozCancelFullScreen();
        } else if (myv.webkitCancelFullScreen) {
            myv.webkitCancelFullScreen();
        }
    }

    suoFang.addEventListener("click",function () {
        if(myv.fullScreen){
          exitFullscreen();
        }else {
            FullScreen();
        }
        // myv.style.height=100+"%";
        // bk.style.background="none";
        // bg.style.display="none";
    });

    //视频切换
    //下一个视频
    ai09.addEventListener("click",function () {
        i++;
        if(i<=s.length-1){
            boFang.style.display="none";
            zanTing.style.display="block";
            myv.src = s[i];
            myv.poster =p[i];
        }else {
            myv.src = s[0];
            myv.poster =p[0];
        }
    });

    //上一个视频
    ai10.addEventListener("click",function () {
            i--;
        if(i>=s[0]){
            boFang.style.display="none";
            zanTing.style.display="block";
            myv.src = s[i];
            myv.poster = p[i];
        }
        else {
            myv.src = s[0];
            myv.poster = p[0];
        }
    });



}
ty_888
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript控制视频关闭在IE下运行完美，无声音延续
u010497467的专栏
12-12 621
这是视频遮罩层和关闭按钮 /* Show_vedio*/ .show_vedio{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index:2; background:#000; opacity:.6; margin-bottom:-650px;} .vedio_play{ margin:0 auto; wi
js简单操作video
qq_45457760的博客
03-27 6643
包括上图中的视频播放时长/总时长、播放、暂停、静音、加速、减速、快进、后退等操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt..
Android SurfaceView 实现实时显示摄像头视频
Android之旅
05-15 1万+
1.注册 SurfaceView实例： private SurfaceView mainSfCamera; mainSfCamera = (SurfaceView) findViewById(R.id.main_sf_camera); 2.检测是否存在摄像头： private boolean checkCameraHardware(Context context) { ...
html video全屏原理,HTML video UI及全屏功能记录
weixin_31264951的博客
06-02 252
video::-webkit-media-controls-fullscreen-button {background: #fff url(images/fxh/bofanganniu-up.png) 0 0 no-repeat;background-size: 30px 30px;display:none;}//可影藏全屏按钮video::-moz-media-controls-fullscre...
swiper大屏文件预览图片和视频,视频切换时暂停视频.
weixin_50061893的博客
11-03 1169
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录需求一、遇到问题？二、渲染图片和视频1.首先判断附件是否是视频文件和图片文件,如果不是就显示附件不支持预览2.html代码部分解决切换视频时候暂停的问题2.通过监听swipier的切换回调函数配合动态ref 来获取dom,并且判断dom是否是视频 如果是视频调用video的原生api 暂停视频 需求 要求做附件预览,可以预览图片文件和视频文件。 一、遇到问题？ 视频文件一旦播放切换swiper轮播图到下一张,上一个的视频还是会保持
使用javascript实现监控视频播放并打印日志
10-24
主要介绍了使用javascript实现监控视频播放并打印日志的方法及示例代码分享，非常不错,需要的朋友可以参考下
前端开发-js-视频播放时长实时记录
04-10
自己写的一个用于记录视频播放时长的js，通过video标签的事件处理实现，文末有使用示例，引入即用。
javascript控制图片播放的实现代码
10-23
主要介绍了javascript控制图片播放的实现代码，代码很简单,需要的朋友可以参考下
利用JAVASCRIPT控制MEDIA PLAYER的功能实现
10-31
本文将详细介绍如何使用JavaScript来实现对MediaPlayer的各种控制功能，包括音量调节、播放进度显示等。 #### 二、关键代码解析 为了更好地理解实现原理，我们首先来看一下示例代码中的几个关键部分： ##### 1. ...
基于JavaScript和BootStrap实现B站分集视频的区间内总时长计算源码+项目说明.zip
最新发布
01-11
基于JavaScript和BootStrap实现B站分集视频的区间内总时长计算源码+项目说明.zip基于JavaScript和BootStrap实现B站分集视频的区间内总时长计算源码+项目说明.zip基于JavaScript和BootStrap实现B站分集视频的区间内总...
js实现播放器，有进度条，能控制音量
01-24
很好的一个js播放器哦，有进度条，有歌词等等，给media player 没区别。
ty.rar_bg888.ty_涂鸦
09-14
flash版的涂鸦 界面漂亮，操作内容强
js读取本地mp4视频文件时长
热门推荐
cyy298的博客
09-08 2万+
js间接获取视频文件时长
<video> 禁用全部右键菜单 / video.js视频播放时长修改
weixin_30627341的博客
08-27 854
<video> 禁用全部右键菜单 <video oncontextmenu="return false;" id="my-video-player" width="854" height="480" controls autoplay> <source src="https://example.com/link-to-my-video.mp4" ...
js调用video的播放时长
wozhaoying的博客
11-10 1356
<video id=“vid”> <source src="./video.mp4"></video> //尽量这样写 别直接再video中写src 那样会出现啊兼容性问题 <div class="time1">00:00:00</div> //视频播放时间 <div class="time1">88:88:88</div>// 视频总时长 var video=document.getElementById('vid
JS控制视频播放、暂停、倍速、音量等功能
电脑高级开关机工程师的博客
06-22 4313
JS控制视频播放、暂停、倍速、音量等功能，隐藏浏览器原生视频控件。
【前端用法】前端JS获取视频时长的写法
No8g攻城狮的博客
03-11 6622
下面的代码直接可以使用，获取视频的时长，然后可以根据业务再具体写逻辑 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-T...
使用JavaScript来控制视频的播放/暂停以及在视频结束时切换到下一个视频。
05-19
你可以使用HTML5的<video>标签来嵌入视频，并使用JavaScript控制它的播放、暂停和切换到下一个视频。以下是一个示例代码： HTML: ```html <video id="my-video" width="320" height="240" controls> <source src="video1.mp4" type="video/mp4"> <source src="video1.webm" type="video/webm"> Your browser does not support the video tag. </video> <button id="play-pause-btn">Play/Pause</button> <button id="next-btn">Next</button> ``` JavaScript: ```javascript var video = document.getElementById("my-video"); var playPauseBtn = document.getElementById("play-pause-btn"); var nextBtn = document.getElementById("next-btn"); // 播放/暂停按钮点击事件 playPauseBtn.addEventListener("click", function() { if (video.paused) { video.play(); playPauseBtn.textContent = "Pause"; } else { video.pause(); playPauseBtn.textContent = "Play"; } }); // 视频结束事件 video.addEventListener("ended", function() { // 切换到下一个视频 video.src = "video2.mp4"; video.load(); video.play(); }); // 下一个视频按钮点击事件 nextBtn.addEventListener("click", function() { // 切换到下一个视频 video.src = "video2.mp4"; video.load(); video.play(); }); ``` 该代码将创建一个视频播放器，并在播放/暂停按钮和下一个视频按钮上添加点击事件侦听器。在播放/暂停按钮点击事件中，我们检查视频是否暂停，如果是，则开始播放视频，否则暂停视频。在视频结束事件中，我们将视频切换到下一个视频，并重新加载和播放它。在下一个视频按钮的点击事件中，我们执行与视频结束事件相同的操作，以切换到下一个视频。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值