视频弹幕（蓝桥杯练习题）

最新推荐文章于 2024-08-29 15:47:48 发布

万花镜whj

最新推荐文章于 2024-08-29 15:47:48 发布

阅读量322

点赞数 3

文章标签：蓝桥杯前端 javascript

本文链接：https://blog.csdn.net/weixin_62613460/article/details/136635456

版权

视频弹幕

仅做记录之用

const bullets = [
    "前方高能",
    "原来如此",
    "这么简单",
    "学到了",
    "学费了",
    "666666",
    "111111",
    "workerman",
    "学习了",
    "别走，奋斗到天明"];


/**
 * @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失
 * @param {Object} bulletConfig 弹幕配置
 * @param {Element} videoEle 视频元素
 * @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕
 * 
*/
function renderBullet(bulletConfig, videoEle, isCreate = false) {
    const spanEle = document.createElement("SPAN");
    spanEle.classList.add(`bullet${index}`);
    if (isCreate) {
        spanEle.classList.add("create-bullet")
    }
    // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
    spanEle.innerText = bulletConfig.value
    spanEle.style.color=`rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`
    videoEle.appendChild(spanEle)
    let vele = getEleStyle(videoEle) //获取的坐标信息是相对于屏幕的，不是绝对定位的
    let sele = getEleStyle(spanEle)
    spanEle.style.left = `${vele.width}px`
    spanEle.style.top = `${getRandomNum(0,vele.height)}px`
    let val = 0 
    let time = setInterval(() => {
       val = val + bulletConfig.speed
       spanEle.style.left = `${vele.width - val}px`
    //    console.log(val, getEleStyle(spanEle))
       if(getEleStyle(spanEle).right <= vele.left){
        console.log("66---",getEleStyle(spanEle),vele)
        clearInterval(time)
        videoEle.removeChild(spanEle)
        // spanEle.remove()   上下两个应该都行?
        return
       }
    }, bulletConfig.time);
    
}

document.querySelector("#sendBulletBtn").addEventListener('click', () => {
    // TODO:点击发送按钮，输入框中的文字出现在弹幕中
    bulletConfig.value= document.querySelector("#bulletContent").value
    if(bulletConfig.value){
        renderBullet(bulletConfig,videoEle,true)
    }
    document.querySelector("#bulletContent").value=""
})
//----
function getEleStyle(ele) {
    // 获得元素的width,height,left,right,top,bottom
    return ele.getBoundingClientRect();
}

function getRandomNum(end, start = 0) {
    // 获得随机数，范围是 从start到 end
    return Math.floor(start + Math.random() * (end - start + 1));
}

// 设置 index 是为了弹幕数组循环滚动
let index = 0;
const videoEle = document.querySelector("#video");
// 弹幕配置
const bulletConfig = {
    isHide: false, // 是否隐藏
    speed: 5, // 弹幕的移动距离
    time: 50, // 弹幕每隔多少ms移动一次
    value:"" // 弹幕的内容
}
let isPlay = false;
let timer; // 保存定时器
document.querySelector("#vd").addEventListener('play', () => {
    // 监听视频播放事件，当视频播放时，每隔 1000s 加载一条弹幕
    isPlay = true;
    bulletConfig.value = bullets[index++];
    renderBullet(bulletConfig, videoEle);
    timer = setInterval(() => {
        bulletConfig.value = bullets[index++];
        renderBullet(bulletConfig, videoEle);
        if (index >= bullets.length) {
            index = 0;
        }
    }, 1000);
})

document.querySelector("#vd").addEventListener("pause", () => {
    isPlay = false;
    clearInterval(timer);
})

document.querySelector("#switchButton").addEventListener("change", (e) => {
    if (e.target.checked) {
        bulletConfig.isHide = false;
    } else {
        bulletConfig.isHide = true;
    }
})