自定义播放器JS_自定义源播放器

自定义播放器JS_自定义源播放器需要用到的属性:currentTime:显示视频播放的时间duration:总时间volume:0.0-1.0音量控制muted:是否静音需要用到的方法和事件:play():播放pause():暂停webkitRequestFullScreen():全屏timeupdate:时间更新(类似setInterval)canplay:可以播放<script>//1.找到需要操作的元素varvideo=documen

需要用到的属性:

currentTime : 显示视频播放的时间

duration : 总时间

volume : 0.0-1.0音量控制

muted : 是否静音

需要用到的方法和事件:

play() : 播放

pause() : 暂停

webkitRequestFullScreen():全屏

timeupdate : 时间更新(类似setInterval)

canplay: 可以播放

<script>
// 1.找到需要操作的元素
var video = document.getElementById('video');//找到视频dom对象
var jp_play = document.getElementsByClassName('jp-play')[0];//播放
var jp_pause = document.getElementsByClassName('jp-pause')[0];//暂停
var jp_duration = document.getElementsByClassName('jp-duration')[0];//总时长
var jp_current_time = document.getElementsByClassName('jp-current-time')[0];//播放的时间
var jp_seek_bar = document.getElementsByClassName('jp-seek-bar')[0];//整个进度条
var jp_play_bar = document.getElementsByClassName('jp-play-bar')[0];//播放的进度条
var jp_full_screen = document.getElementsByClassName('jp-full-screen')[0];//全屏按钮

var jp_volume_bar_value = document.getElementsByClassName('jp-volume-bar-value')[0];//音量控制


// 2.当视频播放的时候 需要触发的函数
video.addEventListener('canplay', function () {
    // 3.点击播放按钮
    jp_play.addEventListener('click', function () {
        video.play();
        jp_play.style.display = 'none';
        jp_pause.style.display = 'block';
    })
    // 4.点击暂停
    jp_pause.addEventListener('click', function () {
        video.pause();
        this.style.display = 'none';
        jp_play.style.display = 'block';
    })
    // 6.添加总时长
    jp_duration.innerHTML = formatTime(video.duration);
    // 7.添加播放时长
    video.addEventListener('timeupdate', function () {
        jp_current_time.innerHTML = formatTime(video.currentTime);

        // 8.同时设置进度条的播放进度
        var scale = video.currentTime / video.duration;
        jp_play_bar.style.width = scale * 100 + '%';
        // 9.点击总进度条,改变播放进度
        jp_seek_bar.addEventListener('click', function (e) {
            e = e || window.event;
            var scale = e.offsetX / this.offsetWidth;
            jp_play_bar.style.width = scale * 100 + '%';
            // 点击进度条后    进度条的显示位置
            video.currentTime = scale * video.duration;
        })

    })
    // 10.音量控制
    jp_volume_bar_value.addEventListener('click', function (e) {

        e = e || window.event;
        var vol = e.offsetX / this.offsetWidth;
        jp_volume_bar_value.style.width = vol * 100 + '%';
        video.valume = vol;

    })
    // 11.全屏
    jp_full_screen.addEventListener('click', function () {
        video.webkitRequestFullScreen()
    })
})

// 5.秒 变 分 的方法
function formatTime(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}`
}
</script>
只听到从架构师办公室传来架构君的声音:
归路畏逢虎,况闻岩下风。有谁来对上联或下联?

笔记:

1.监听事件

事件.addEventListener('event',function,useCapture);

一参数event是事件类型,如:"click"或"mousedown"

二参数function(){};事件触发后调用函数

三参数useCapture是布尔值true或者false,是可选的(默认值是false)

注意:不要使用“on”前缀

传递参数:使用“匿名函数”调用带参数的函数。

2.事件.innerHTML=num

j将一段HTML代码或文本重新插入到html的元素中,新添加的值覆盖原来的值。

3.Math.floor 向下取整

4.事件.addEventListener('event',function(e){

e=e||window.event;(兼容)

});

注意:e 为当前点击事件

5.offsetWidth 属性宽度包含内边距(padding)和边框(border)和元素的水平滚动条,不包含外边距和:before或:after等伪类元素高度。语法:event.offsetWidth

注:e.offsetX 点击当前事件

6.跳转网页:location href="./     ";

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/212074
0

发表评论