自定义播放器

最新推荐文章于 2023-01-10 09:07:14 发布
最新推荐文章于 2023-01-10 09:07:14 发布
阅读量479 收藏
点赞数
分类专栏： html5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/76316536
版权

媒体元素
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

媒体元素_2
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body{
                padding: 50px 500px;
            }
            button{
                display: inline-block;
                border: none;
                outline: none;
                background: #E0E0E0;
            }
            span{
                display: inline-block;
            }
            video{
                display: block;
            }
            .control-btn{
                width: 570px;
                height: 32px;
                background: #E0E0E0;
                padding: 7px 0 0 15px ;
            }
            button,img{
                width: 25px;
                height: 25px;
            }

            .progress{
                position: relative;
                display: inline-block;
                width: 220px;
                height: 8px;
                background: #ccc;
                margin: 2px 0 8px 5px;
                border-radius: 4px;
            }
            .progressbar{
                position: absolute;
                background: purple;
                width: 10px;
                height: 8px;
                -moz-border-radius-bottomleft: 4px;
                -moz-border-radius-topleft: 4px;
            }

            .mouse{
                position: absolute;
                left: 0px;
                top: -3px;
                width: 10px;
                height: 10px;
                border-radius: 40%;
                border: 1px solid #666666;
                background: #999;
                cursor: pointer;
            }

            .text{
                display: inline-block;
                white-space: nowrap;
                margin-left: 7px;
                font-size: 12px;
                color: #666;
                height: 20px;
                line-height: 20px;
                position: relative;
                top: -6px;

            }
            .current,.duration{
                width: 50px;
                padding-left: 2px;
                display: inline-block;
                padding-bottom: 8px;
            }
            .volumn{
                display: inline-block;
                width: 70px;
                height: 8px;
                background: #ccc;
                margin: 2px 5px 8px 5px;
                border-radius: 5px;
                position: relative;
            }
            .volumn-control{
                position: absolute;
                left: 2px;
                top: 0;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: purple;
                cursor: pointer;
            }
        </style>
        <!--<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>-->
        <script type="text/javascript">
            window.onload = function(){
                var disX = 0;
                var disX2 = 0;
                var timer = null;
                var oV = document.getElementById("video");
//              var oControl = document.querySelector(".control-btn");

                var oCurr = document.querySelector(".current");
                var oDura = document.querySelector(".duration");
                var oPro = document.querySelector(".progress");
                var oProBar = document.querySelector(".progressbar");
                var oMouse = document.querySelector(".mouse");
                var oPlay = document.querySelector(".play");
                var oPImg = document.querySelector(".play img");

                var oMuted = document.querySelector(".muted");
                var oMImg = document.querySelector(".muted img");

                var oFull = document.querySelector(".full");
                var oFImg = document.querySelector(".full img");    

                var oVolu = document.querySelector(".volumn");
                var oVCon = document.querySelector(".volumn-control");




                //播放
                oPlay.onclick = function(){
                    if(oV.paused){
                        oV.play();
                        oPImg.src = "img/play.png";
                        nowTime();
                        timer = setInterval(nowTime,1000);
                    }else{
                        oV.pause();
                        oPImg.src="img/pause.png";  
                        clearInterval(timer);
                    }
                }

                 oDura.innerHTML = changeTime(oV.duration);

                //静音

                oMuted.onclick = function(){
                        if( oV.muted ){         
                            oV.volume = 1;
                            oMImg.src = "img/muted.png";
                            oV.muted = false;   
                        }
                        else{
                            oV.volume = 0;
                            oMImg.src = "img/jy.png";
                            oV.muted = true;
                        }
                };

                function nowTime(){
                    oCurr.innerHTML = changeTime(oV.currentTime);
                    var scale =  oV.currentTime/oV.duration;
                    oProBar.style.width = scale * 210 + "px";
                    if(scale * 210<3){
                        oMouse.style.left = 0;
                    }else{
                        oMouse.style.left = scale * 210 -3 + "px";
                    }
                    if(parseInt(oV.currentTime)==12){
                        oPImg.src="img/pause.png";  
                    }
                    console.log(oV.currentTime);
                }


                function changeTime(iNum){
                    iNum = parseInt( iNum );
                    var iH = toZero(Math.floor(iNum/3600));
                    var iM = toZero(Math.floor(iNum%3600/60));
                    var iS = toZero(Math.floor(iNum%60));
                    return iH + ':' +iM + ':' + iS; 
                }

                function toZero(num){
                    return num=num>=10?num:'0' + num;       
                }


                //全屏

                oFull.onclick = function(){
                    oV.mozRequestFullScreen();
                    if(oV.mozRequestFullScreen()){
                        oFImg.src = "img/min.png";
                    }else{
                        oFImg.src = "img/full.png";
                    }

                };


                //控制播放进度

                oMouse.onmousedown = function(ev){
                    var ev = ev || window.event;
                    disX = ev.clientX - oMouse.offsetLeft;
                    document.onmousemove = function(ev){
                        var ev = ev || window.event;
                        var L = ev.clientX - disX;
                        if(L<0){
                            L = 0;
                        }else if(L > 210){
                            L = 210;
                        }
                        if(L<3){
                            oMouse.style.left =0;
                        }else{
                            oMouse.style.left = L - 3 + "px";
                        }

                        var scale = L/210;
                        oV.currentTime = scale * oV.duration;
                        oCurr.innerHTML = changeTime(oV.currentTime);
                        oProBar.style.width = scale * 210 + "px";
                    };
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                    return false;
                };

                //控制声音大小
                oVCon.onmousedown = function(ev){
                    var ev = ev || window.event;
                    var disX2 = ev.clientX - oVCon.offsetLeft;
                    document.onmousemove = function(ev){
                        var ev = ev || window.event;
                        var L = ev.clientX - disX2;
                        if(L<0){
                            L = 0;
                        }else if(L > 62){
                            L = 62;
                        }
                        oVCon.style.left = L + "px";
                        var scale = L/62;
                        oV.volume = scale;
                        document.onmouseup = function(){
                            document.onmousemove = null;
                        };
                        return false;
                    }
                }

            };
        </script>
    </head>
    <body>
        <video width="584" id="video">
            <source src="img/movie.mp4" type="video/mp4"></source>
        </video>
        <div class="control-btn">
            <button class="play"><img src="img/pause.png" alt="" /></button>
            <div class="progress">
                <div class="progressbar"></div>
                <div class="mouse"></div>
            </div>
            <div class="text">
                <span class="current">00:00:00</span>/<span class="duration">00:00:12</span>
            </div>
            <button class="muted"><img src="img/muted.png"/></button>
            <div class="volumn">
                <div class="volumn-control"></div>
            </div>
            <button class="full"><img src="img/full.png" alt="" /></button>
        </div>
    </body>
</html>
sweetllh
关注
专栏目录
Android自定义视频播放器(网络,本地)
07-13
自定义videoview视频播放器。
Android自定义播放器控件VideoView
09-02
在自定义播放器控件时，VideoView是基础组件，通过对其功能的扩展和封装，我们可以实现更加复杂和定制化的视频播放体验。 首先，了解VideoView的基本方法是至关重要的。`getDuration()`用于获取视频的总时长，`...
ffplay自定义播放器封装C#接口
05-14
提供了x86、x64dll、qt示例、C#封装对象代码及示例项目，不包含播放器c语言源码，请根据需要下载。版本v1.3.15。原文链接：https://blog.csdn.net/u013113678/article/details/124759757。 * 更新日志 * v1.3:支持...
Android自定义播放器
05-14
在Android平台上，自定义播放器开发是一项常见的任务，它涉及到多媒体处理、硬件加速、网络流媒体等多个技术领域。本文将深入探讨如何构建一个高效的Android自定义播放器。 首先，了解Android多媒体框架至关重要。...
Scorm自定义播放器
06-28
在SCORM自定义播放器的场景中，我们主要探讨的是如何根据需求定制一个符合SCORM规范的播放器，以便更好地控制和展示学习内容。 SCORM的核心组件包括： 1. 包装器（Wrapper）：这是连接LMS和学习内容的桥梁，处理...
自定义视频播放器
qq_43618136的博客
02-26 190
自定义视频播放器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>视频播放</title> <!--字体图标库--> <link rel="stylesheet" href="css/f...
ios-iOS自定义视频播放器（avPlayer简易版）.zip
07-11
JWAVPlayer 自定义简单的支持横屏竖屏切换的Avplayer ```javascript JWPlayer*player=[[JWPlayer alloc]initWithFrame:CGRectMake(0, 0, 414,9*414/16)]; [player updatePlayerWith:[NSURL URLWithString:@"http://120.25.226.186:32812/resources/videos/minion_01.mp4"]]; [self.view addSubview:player]; ``` [git地址](https://github.com/JarvisHot/JWAVPlayer) 给个star呗
简单的自定义播放器
qq_31207499的博客
07-23 567
    利用Less和HTML写了一个简单的自定义播放器，github地址为：https://github.com/CassielLee/clPlayer.git 效果如下：  
简易的自定义播放器
a975235605的博客
02-13 999
简单的自定义视频播放器，要用到SurfaceView控件，其他代码和之前的播放内存卡中音乐的播放器差不多 捕捉视频画面 mediaPlayer.setDisplay(sv_mains_view.getHolder());读取内存卡文件权限 主要布局文件 <SurfaceView android:id="@+id/sv_mains_view" android:la
自定义视频播放器制作
祥哥的说
12-29 1111
完整源代码：完整源代码  NO.1 视频播放器控制台隐藏弹出的设置 /*控制台的样式设置*/ .player__controls { display:flex; /*弹性布局，子元素生效*/ position: absolute; bottom:0; width: 100%; transform: translateY(100%) translateY(-5px); ...
Android自定义视频播放器（一）
热门推荐
scorpio的博客
08-08 1万+
一、引言 我们在开发Android多媒体应用时，有两种方式来播放多媒体资源。第一种是使用隐式的Intent，来使用系统或者手机已经安装的第三方播放器应用来播放音视频，第二种是使用Android自带的、我们自定义的播放器来播放，这种主要是采用Android提供的MediaPlayer和VideoView来播放多媒体文件，下面会逐一讲述。两种方式的代码如下： //隐式方式，使用第三方播放器 In...
一个自定义的html5视频播放器
最新发布
阿酷tony
01-10 2913
一个自定义的html5视频播放器// 功能: // 1.视频的播放与暂停(图标变化) // 2.总时间的显示 // 3.当前时间的显示(进度) // 4.进度条的显示 // 5.跳跃播放 // 6.全屏
Android自定义播放器实现详解
"此资源提供了关于在Android平台上创建自定义播放器的详细代码实例，涵盖了从基本的音频播放到更复杂的视频播放功能。" 在Android开发中，创建一个自定义播放器是实现多媒体功能的关键步骤。这个资源提供的内容可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值