多媒体视频的添加，声音，开始/暂停，放大...可以引进一些网页上收费的视频，自己这样处理就可以观看_video.removeeventlistener("ended", arguments.calle-CSDN博客

本文链接：https://blog.csdn.net/qq_41574975/article/details/89889504

也是研究一段，看着照猫画老虎，自己慢慢做出来的，试验一下确实可行

知识点

打造自定义的视频播放器需要用到的属性
currentTime: 开始播放到现在所用的时间
duration: 媒体总时间（只读）
volume : 0.0-1.0 的音量相对值
muted：是否静音
打造个性的视频播放器需要用到的方法
play() : 媒体播放
pause() : 媒体暂停
timeupdate() : 时间更新
canplay（）：可以播放
所需事件
ended 停止

废话不多说：

看码

老习惯，css样式给上

    <style type="text/css">

    .aaa{
        width:400px;
        height:15px;
        background:#f2f2f2;
    }
    .aas{
        width:400px;
        height:15px;
        background:#f2f2f2;
    }
    #aaad{
        height:100px;
        width:20px;
        background:#f2f2f2;
    }
    #y{
        width:20px;
        background:#ff6600;
    }
    </style>

html一些简单的编辑，十分简单

<body>
    <video id="video" src="Ailee,이민정,김새하 - 보여줄게(给你看) SBS Fantastic Duo 16／05／15 现场版.mp4" controls="controls"></video>
    <button id="kaishi">开始/结束</button>
    <button id="bianda">变大</button>
    <div><span>播放时间：</span><span id="currentTime"></span></div>
    <div class="aaa" id="aaa"><div id="aadv" style="background:#ff6600;height:15px;width:0;"></div></div>
    <div id="aaad"><div id="y"></div></div>
</body>

js重点，实际上不麻烦，思路跟着，慢慢就会顺通，不要心不在焉

<script type="text/javascript">
video.addEventListener("canplay",function(){    	//canplay事件：播放
    video.removeEventListener("canplay",arguments.callee);			//实现加载一次
    kaishi.onclick = function(){					//kaishi这个id加点击事件
        if (video.paused){							//播放/暂停
            video.play();
        }else{
            video.pause();
        }
    }
    bianda.onclick = function(){
        video.style.width = 500+"px";				//放大
    }
    video.ontimeupdate = function(){
        currentTime.innerHTML = toMS(video.currentTime);	//播放时间进行交互，调用函数toMS
        var tt = (video.currentTime/video.duration)*100+"%"	//播放到现在所用时间/总时间因为是小数所以*100
        aadv.style.width = tt;					//进度条的宽初始值0，所以跟着时间加长宽度自行变换
    }
    aaa.onmousemove = function(e){
        var e = e||event;
        var s = e.offsetX;							//父元素（容器的宽）
        var bili= s/aaa.offsetWidth;			//aaa的宽占据容器宽的比例。
        var sss = video.duration*bili;		//媒体总长时间*比例
        video.currentTime = sss;				//已经播放的时间
    }
    
},false)
function toMS(num){
        var m = Math.floor(num/60);			//转化成时间代表分钟
            m = m>9?m:"0"+m;
        var s = Math.floor(num%60);			//转化成时间代表秒
            s = s>9?s:"0"+s;
            return m+":"+s
    }
    y.style.height = aaad.offsetHeight+"px";			//视频声音跟容器额就是父级是一样的高度
    aaad.onclick = function(e){
        var e = e||event;
        var w = e.offsetY;										//容器高度
        var yin = aaad.offsetHeight;						//aaad的高度
        if (y<=0) {
            video.volume = 0;									//如果音量小于等于0就让它等于0
        }else if(y>=yin){
            video.volume = yin;									//如果音量大于最大容量就等于最大容量
        }
        var p =(w/yin);												//结算比例，上面说过就不罗嗦了
        video.volume = p;										//把时间赋给p里
        y.style.height = p*100+"%"							//定义为宽点击为可变的
    }
</script>