H5 video自定义视频控件

Posted 2020-10-01 砌墙的砖

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 video自定义视频控件相关的知识，希望对你有一定的参考价值。

1.自定义效果截图

2.效果源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>H5 video自定义视频控件</title>
        <style>
            * {
                   margin: 0;
                   padding: 0;
            }
            .box {
                background-color: #000;
                position:relative;
                display: inline-block;
                color: #fff;
                left: 50%;
                margin-left: -300px;
            }
            .controls {
                position: absolute;
                bottom: 3px;
            }
            input[type="button"]{
                background-color: cornflowerblue;
                color: #fff;
                border: none;
                padding: 5px 10px;
                cursor: pointer;
            }
            #rangebar {
                width: 200px;
                height: 5px;
                border: 1px solid #ccc;
                margin-top: 3px;
                display: inline-block;
            }
            #rangebar>p {
                width: 0%;
                height: 100%;
                background-color: blueviolet;
            }
            #progress {
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <video src="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" width="600" height="450" poster="">
                您的浏览器不支持 video 标签。
            </video>
            <div class="controls">
                <input type="button" value="播放" id="play"/>
                <input type="button" value="暂停" id="pause"/>
                <input type="button" value="快进" id="speed"/>
                <input type="button" value="快退" id="back"/>
                <input type="button" value="静音" id="mute"/>
                <input type="button" value="全屏" id="fullscreen"/>
                <a href="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" download="广告视频">
                    <input type="button" value="下载" id="download"/>
                </a>
                VOICE:<input type="range" id="progress" value="30" min="0" max="100"/>
                <br/></br.>视频进度：<div id="rangebar">
                    <p></p>
                </div>
            </div>
        </div>
        <script>
            var video = document.getElementsByTagName("video")[0];
            play.onclick=function(){
                video.play()
            }
            pause.onclick=function(){
                video.pause()
            }
            speed.onclick=function(){
                video.currentTime += 5; 
                console.log(video.currentTime);
            }
            back.onclick=function(){
                video.currentTime -=5;
                console.log(video.currentTime);
            }
            mute.onclick = function(){
                video.muted = true;
                progress.value=0;
            }
            fullscreen.onclick=function(){
                video.webkitRequestFullscreen();
            }
            /* *视频播放进度*
             * 获取视频总时长 video.duration
             * ........当前播放位置 video.currentTime
             * 进度条p的宽度：(video.currentTime/video.duration)*100+\'%\'
             * */
            var timer = setInterval(function(){
                rangebar.getElementsByTagName("p")[0].style.width=(video.currentTime/video.duration)*100+\'%\';
            },100);
            
            //音频大小
            progress.onmousemove = function(){
                video.volume = this.value/100;
            }
        </script>
    </body>
</html>

以上是关于H5 video自定义视频控件的主要内容，如果未能解决你的问题，请参考以下文章

H5 浏览器自定义用户控件——嘿

h5中利用canvas绘制video 忽略浏览器自带视频播放控件

h5 的video视频控件

自定义video控件

H5视频播放器属性与API控件