HTML5 video (custom video player source code)

Keywords: Firefox network Javascript less

video object

Compatibility:

safari browser does not support webm format

Chrome browser supports webm format

ie8 and the following do not support video tags. ie9 supports video tags, but mp4 format

Firefox supports video in ogv format

Compatibility writing

<video controls>
        <source src="data/demo.ovg">
        <source src="data/demo.mp4">
        <source src="data/demo.webm">
        Your browser does not support it. Please upgrade your browser
    </video>

width height autoplay muted
Post video player with preview (poster image)

<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>

Check the video tab

var VideoNode = document.getElementById('myVideo');

Source of src control video

VideoNode.src = 'data/demo.ogv';

Set controls manually

VideoNode.controls = true;

Set video volume

VideoNode.volume = 0.5;

currentTime current playback time
Fast forward effect

gogogo.onclick = function(){
            VideoNode.currentTime = VideoNode.currentTime + 3;
        };

pause()

stopNode.onclick = function(){
            VideoNode.pause();
        };

play()

playNode.onclick = function(){
            VideoNode.play();
        };

load refresh player event

reloadNode.onclick = function(){
            VideoNode.src = 'data/demo.mp4';
            VideoNode.load();
        };

Can play video is loaded and ready to play

VideoNode.addEventListener('canplay',function(){
            console.log('The video is loaded and ready to play');
        });

requestFullscreen makes video tags full screen
VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();

fullScreenNode.onclick = function(){
            if(VideoNode.webkitRequestFullscreen){
                VideoNode.webkitRequestFullscreen();
            }
            else if(VideoNode.mozRequestFullScreen){
                VideoNode.mozRequestFullScreen();
            }
        };

volumechange when the volume changes

VideoNode.onvolumechange = function(){
            console.log('volumechange');
        };

Random sound change

volumeNode.onclick = function(){
            VideoNode.volume = Math.random();
        };

seeking events triggered when the user starts dragging the progress bar

var seekingNum = 0;
        VideoNode.onseeking = function(){
            console.log('seeking...');
            seekingNum++;
            seeking.innerHTML = seekingNum;
        };

Events triggered when the user has completed the operation on the progress bar of the video

var seekedNum = 0;
        VideoNode.onseeked = function(){
            console.log('seeked...');
            seekedNum++;
            seeked.innerHTML = seekedNum;
        };

timeupdate monitors the status of video playing

VideoNode.addEventListener('timeupdate',function(){
            // Total time in minutes: seconds
            let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
            // Current time, in minutes: seconds
            let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
            timeNode.innerHTML = nowTime+'/'+allTime;
        })

readyState video preparation information

        console.log(VideoNode.readyState);
        setTimeout(function(){
            console.log(VideoNode.readyState);
        },500);

playbackRate to view or set a playback speed for a video

console.log(VideoNode.playbackRate)

Rate setting speed

//Rate Set 0.5 Double speed
        RateNode.children[0].onclick = function(){
            VideoNode.playbackRate = 0.5;
        };
        //Rate Set 1x speed
        RateNode.children[1].onclick = function(){
            VideoNode.playbackRate = 1;
        };
        //Rate Set 2x speed
        RateNode.children[2].onclick = function(){
            VideoNode.playbackRate = 2;
        };

loop settings

loopNode.onclick = function(){
            if(VideoNode.loop == false){
                this.innerHTML = 'loop';
                VideoNode.loop = true;
            }
            else{
                this.innerHTML = 'Acyclic';
                VideoNode.loop = false;
            }
        };

Data returned by src

console.log('src='+VideoNode.src);

Data returned by currentSrc

console.log('currentSrc='+VideoNode.currentSrc);

Listen to the ended event

VideoNode.addEventListener('ended',function(){
            console.log('The video is over');
            VideoNode.play();
        })

View the network status of the video

console.log(VideoNode.networkState)

Set controls manually

VideoNode.controls = true;

Set mute manually

VideoNode.muted = true;

Custom video player
Drawing

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;} 
.outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}  
.outerNode .videoNode{
    width: 540px;height: 305px;float: left;
    background: black;
}     
.outerNode .controlsNode{
    width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.gif) repeat-x;
}

.outerNode .controlsNode .playNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/playNode.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/pause.png) no-repeat;cursor: pointer;
}


.outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;}
.outerNode .controlsNode .loadNode .lineNode{
    width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
    background: url(images/line_bg.png) repeat-x;

}
.outerNode .controlsNode .loadNode .lineNode .lineRight{
    width: 2px;height: 100%;position: absolute;right: 0;top: 0;
    background: url(images/line_r_bg.png) no-repeat;
}

.outerNode .controlsNode .loadNode .loadLeft{
    height: 100%;width:3px ;position: absolute;left: 0;top: 0;
    background: url(images/left_bg.png) no-repeat;z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight{
    height: 100%;width:3px ;position: absolute;right: 0;top: 0;
    background: url(images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}

.outerNode .controlsNode .timeNode{
    float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outerNode .controlsNode .volumeNode{
    width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
    background: url(images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
    height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
    background: url(images/volumeLine_bg.png) repeat-x;position: relative; 
}
.outerNode .controlsNode .volumeLine .v_left{
    width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
    width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;}
.outerNode .controlsNode .fullNode{
    width:15px;height:17px;float: left;margin: 6px 0 0 35px;
    background: url(images/full_bg.png) no-repeat;cursor: pointer;
    transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
    background: url(images/full_hover_bg.png) no-repeat;
}

    </style>

</head>
<body>
    <!-- The outermost element -->
    <div class='outerNode'>
        <!-- video element -->
        <video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
        <!-- Elements of the controller -->
        <div class='controlsNode'>
            <!-- Button to control playback pause -->
            <div class='playNode'></div>
            <!-- video Progress bar of -->
            <div class='loadNode'>
                <div class='loadLeft'></div>
                <div class='loadRight'></div>
                <!-- Button to drag progress bar -->
                <div class='crlNode'></div>
                <!-- Real progress bar -->
                <div class='lineNode'>
                    <div class='lineRight'></div>
                </div>
            </div>
            <!-- Elements of time -->
            <div class='timeNode'>
                <span class='now'>00:00</span>
                <span> - </span>
                <span class='all'>4:30</span>
            </div>
            <!-- A sign of sound -->
            <div class='volumeNode'></div>
            <!-- Voice bar -->
            <div class='volumeLine'>
                <div class='v_left'></div>
                <div class='v_right'></div>
                <div class='v_DragNode'></div>
            </div>
            <!-- Full screen button -->
            <div class='fullNode'></div>
        </div>
    </div>
<script type="text/javascript">
    //Control of playback pause
    //PlayNode Player button
    //VideoNode player
    //PlayBln Boolean to control pause playback
    //FullNode Full screen button
    //nowNode current time 
    //allNode Full time of video
    //LineNode Current progress bar
    //CrlNode Progress bar button
    //LoadNode Elements outside the progress bar
    var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0],
        FullNode = document.querySelector('.fullNode'),
        nowNode = document.querySelector('.now'),
        allNode = document.querySelector('.all'),
        LineNode = document.querySelector('.lineNode'),
        CrlNode = document.querySelector('.crlNode'),
        LoadNode = document.querySelector('.loadNode'),
        VDragNode = document.querySelector('.v_DragNode'),
        PlayBln = true;

    //Events played and paused
    PlayNode.onclick = function(){
        //Traditional Boolean to change classname Method of
        PlayBln = !PlayBln;
        if(PlayBln == false){
            this.className = 'pauseNode';
            VideoNode.play();

        }
        else{
            this.className = 'playNode';
            VideoNode.pause();
        }
    };

    //Events for full screen buttons
    FullNode.onclick = function(){
        if(VideoNode.webkitRequestFullscreen){
            VideoNode.webkitRequestFullscreen();
        }
        else if(VideoNode.mozRequestFullScreen){
            VideoNode.mozRequestFullScreen();
        }
        else{
            VideoNode.requestFullscreen();
        }
    };

    //Address the NAN Problems of
    VideoNode.addEventListener('canplay',function(){
        var needTime = parseInt(VideoNode.duration);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        allNode.innerHTML = timeNum;
    },false);

    //Solve the problem of less than 10 times
    function toDou(time){
        return time<10?'0'+time:time;
    }

    //When the video is playing, it needs to move at the current time
    VideoNode.addEventListener('timeupdate',function(){
        //Current percentage progress
        LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';
        CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

        var needTime = parseInt(VideoNode.currentTime);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        nowNode.innerHTML = timeNum;
    },false);

    //Drag button for sound
    VDragNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = VDragNode.parentNode.offsetWidth - 2.5;

            needX = needX < -2.5 ? - 2.5 : needX;
            needX = needX > maxX ? maxX : needX;
            //Calculate 0 - 1
            var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;
            VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;

            VDragNode.style.left = needX + 'px';
        };
        document.onmouseup = function(e){
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
    //Drag progress bar button
    CrlNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        VideoNode.pause();

        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = LoadNode.offsetWidth - 8.5;

            needX = needX < -8.5 ? -8.5 : needX;
            needX = needX > maxX ? maxX : needX;
            CrlNode.style.left = needX + 'px';
            LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';


        };
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;
            if(PlayBln == false){
                //console.log(1);
                PlayNode.className = 'pauseNode';
                VideoNode.play();
            }
            else{
                //console.log(2);
                PlayNode.className = 'playNode';
                VideoNode.pause();
            }
        };
        return false;
    };

</script>
</body>
</html>

Posted by mandred on Wed, 13 May 2020 08:33:48 -0700

Programmer Group

HTML5 video (custom video player source code)

Hot Keywords