easyDanmaku.js暂停报错：Cannot read properties of null (reading ‘1‘)

世林_不调皮了

已于 2023-01-03 11:33:12 修改

阅读量1.1k

点赞数

分类专栏：弹幕插件 easyDanmaku.js 文章标签： javascript web Powered by 金山文档

于 2023-01-03 11:13:37 首次发布

本文链接：https://blog.csdn.net/m0_55891422/article/details/128530016

版权

弹幕插件同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

easyDanmaku.js

1 篇文章 0 订阅

订阅专栏

首先我们要知道这个报错是因为你把实例化的EasyDanmaku中的el绑定给了父元素或者，video自己，导致读不到特定的元素

修改：添加一个元素使其绝对定位到video上面，(后面附着的有代码)，并且不能使用loop属性，否则，暂停的时候只能一轮，第二轮就报错了

这个时候就会出现另外一个问题，video鼠标进入事件被item遮挡，此时我们可以使用 pointer-events: none;，然后给item里面的div修改回来pointer-events: auto;

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        .box {
            width: 1000px;
            position: relative;
        }

        video {
            width: 100%;
        }

        .box .item {
            width: 100%;
            height: 90%;
            position: absolute !important;
            top: 0;
            left: 0;
            /* background-color: red; */
            pointer-events: none;
        }

        .box .item>div {
            pointer-events: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <video controls="controls" loop="loop" autoplay="autoplay" muted>
            <source
                src="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4"
                type="video/ogg">

            您的浏览器不支持 HTML5 video 标签。
        </video>

        <div class="item"></div>
    </div>
    <button class="btn">发送弹幕</button>
    <script src="js/jquery.min.js"></script>
    <script src="js/easy-Danmaku.js"></script>
    <script>
        const Danmaku = new EasyDanmaku({
            el: '.item',                        //弹幕挂载节点
            colourful: true,                         //彩色弹幕
            line: 10,                                //弹幕行数
            wrapperStyle: 'danmaku-wrapper',         //默认弹幕样式
            speed: 8,                                //弹幕播放速度
            // runtime: 10,                              //播放一次的时常
            // loop: true,                              //开启循环播放
            hover: true,                             //鼠标移入悬停
            onComplete: () => {                       //播放结束
                send()

            },                                      //hover时 参数为该悬停元素（初始化属性hover必须为true）
            onHover: (dom) => {
                // console.log(dom);
            }
        })
        let state = 0
        var video = document.querySelector('video')
        /*循环播放弹幕 前提初始化属性hover:true*/
        function send() {
            const data = ['danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku6']
            Danmaku.batchSend(data)
        }
        send()
        $('.btn').click(function (e) {
            e.preventDefault();
            // console.log(111);
            // Danmaku.send('我很喜欢你', 'danmaku-wrapper', (e) => {
            //     console.log(e);

            // })
            if (state == 0) {
                video.pause()
                Danmaku.pause()

            }
            else {
                video.play()
                Danmaku.play()
            }
            state = 1 - state
        });
        // setInterval(() => {
        //     //弹幕内容  弹幕样式  持续时间(ms) 回调函数
        //     Danmaku.centeredSend('你好啊', 'danmaku-wrapper', 1000, (e) => {
        //     })
        // }, 2000)
    </script>
</body>

</html>

如果还有不懂得，可以留言，我们一起探讨。

世林_不调皮了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyDanmaku.js暂停报错：Cannot read properties of null (reading ‘1‘)

easyDanmaku.js暂停报错：Cannot read properties of null (reading '1')
复制链接

扫一扫