使用原生js,写个性网页视频播放器

    
    
    
    
    



    
        
        
            
                
                    
                    play
                    pause
                    
                    
                    
                        
                            
                        
                    
                    
                    00:00
                    /

                    00:00
                    


                    
                    
                    

                    
                    
                        
                    
                    

                    
                    full screen
                    restore screen-->

                
                
            
            
        
    

var video = document.getElementById('video') //mp4
var jp_play = document.getElementsByClassName('jp-play')[0]; //播放按钮
var jp_pause = document.getElementsByClassName('jp-pause')[0]; //暂停按钮
var jp_seek_bar = document.getElementsByClassName('jp-seek-bar')[0]; //视频进度条
var jp_play_bar = document.getElementsByClassName('jp-play-bar')[0]; //视频进度条按钮
var jp_duration = document.getElementsByClassName('jp-duration')[0]; //视频总时长
var jp_current_time = document.getElementsByClassName('jp-current-time')[0]; //视频已加载时长
var jp_volume_bar = document.getElementsByClassName('jp-volume-bar')[0]; //音量进度条
var jp_volume_bar_value = document.getElementsByClassName('jp-volume-bar-value')[0]; //音量进度条按钮
var jp_full_screen = document.getElementsByClassName('jp-full-screen')[0]; //全屏
video.addEventListener('canplay', function () {
    // 1、视频播放
    jp_play.addEventListener('click', function () {
        video.play(); //视频播放方法
        jp_play.style.display = 'none';
        jp_pause.style.display = 'block';
    });
    // 2、视频暂停
    jp_pause.addEventListener('click', function () {
        video.pause(); //视频暂停方法
        this.style.display = 'none';
        jp_play.style.display = 'block';
    });
    //3、获取视频的总播放时长
    jp_duration.innerHTML = formatT(video.duration);
    //4、执行timeupdate (时间更新这个方法)
    video.addEventListener('timeupdate', function () {
        // 4.1 获取当前时间
        jp_current_time.innerHTML = formatT(video.currentTime)
        // 4.2 已经播放了多少时间
        var timer = video.currentTime / video.duration;
        // 4.3 设置视频进度条
        jp_play_bar.style.width = timer * 100 + '%';
    })
    // 5、点击 播放进度条改变播放速度
    jp_seek_bar.addEventListener('click', function (e) {
        e = e || window.event; //获取当前的实时事件
        // offset 距离父元素的点
        var scale = e.offsetX / this.offsetWidth;
        // 5.1正在播放的进度条
        jp_play_bar.style.width = scale * 100 + '%';
        // 5.1正在播放的进度条的实时时间
        jp_current_time.innerHTML = formatT(scale * video.duration);
        // 当前视频的播放进度
        video.currentTime = scale * video.duration;
    })

    // 6、音量进度条
    jp_volume_bar.addEventListener('click', function (e) {
        e = e || window.event;
        var scale = e.offsetX / this.offsetWidth;
        jp_volume_bar_value.style.width = scale * 100 + 'px';
        video.volume = scale;
        console.log(scale)
    })
    // 7.全屏幕
    jp_full_screen.addEventListener('click', function () {
        video.webkitRequestFullScreen();
    })
});
//封装时间函数
function formatT(time) {
    var m = Math.floor(time / 60); //分 
    m = m > 9 ? m : '0' + m;
    var s = Math.floor(time % 60); //秒
    s = s > 9 ? s : '0' + s;
    // return m + ':' + s;
    return `${m}:${s}`;
}

效果图：