muiPlay学习入门_muiplayer文档-CSDN博客

本文链接：https://blog.csdn.net/qq_56523345/article/details/138500180
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./lib/mui-player-desktop-plugin.js"></script>
    <!-- 引入基础样式文件 mui-player.min.css -->
    <link rel="stylesheet" type="text/css" href="https://muiplayer.js.org/css/mui-player.min.css" />
    <!-- 引入基础脚本 mui-player.min.js -->
    <script type="text/javascript" src="https://muiplayer.js.org/js/mui-player.min.js"></script>
    <!-- 引入 ccl 样式文件 -->
    <link rel="stylesheet" type="text/css" href="https://muiplayer.js.org/css/CommentCoreLibrary.min.css" />
    <!-- 引入 ccl 脚本文件 -->
    <script type="text/javascript" src="https://muiplayer.js.org/js/CommentCoreLibrary.min.js"></script>


    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <!-- 指定播放器容器 -->
    <div style="width: 800px;height: 300px;">
        <div id="mui-player" class="abp" ref="muiPlayer" style="position: relative;">
            <div id="comment-stage" class='container' style="z-index: 1 !important;height: 325px;width: 100%;"></div>
        </div>
    </div>
    <div>
        <input id="cclValue" />
        <button onclick="sendCCL(this)">发送</button>
    </div>


    <script>

        const customSetting = [
            {
                functions: '循环播放',
                name: 'loopPlay'
            },
            {
                functions: '播放速度',
                name: 'playbackRate',
                childConfig:[
                {functions:'0.5'},
                {functions:'1',selected:true},
                {functions:'2'},
                {functions:'3'},
                {functions:'10'},
                ],
                onToggle(data,selected,back){
                    console.log(data);
                    video.playbackRate = data.functions
                    selected()
                    back()
                }
            }
        ]

        const contextmenu = [{
            name: 'shortcuts',
            context: '快捷键'
        },
        {
            name: 'muiplayer',
            context: 'MuiPlayer'
        }]

        const thumbnails = {}
        let CM = null
        let mp = new MuiPlayer({
            container: "#mui-player",
            title: "标题",
            poster:"https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x99999999999999999",
            src: "http://10.7.44.129:8889/utils/video?fileName=9517f5a0a37507f494a33151ada52f44.mp4",
            plugins: [
                new MuiPlayerDesktopPlugin({
                    customSetting, // 设置组配置
                    contextmenu, // 右键菜单组配置
                    thumbnails,  // 缩略图配置
                })
            ]
        })
        let video = null;
        let danmakuData = [];
        mp.on("ready", (e) => {
            video = mp.video()
            danmakuData.push({ "mode": 1, "text": "请画出受力分析（10分）", "stime": 200, "size": 25, "dur": 7000, "color": 0xffffff },
                { "mode": 5, "text": "这风景太漂亮了吧~", "stime": 2000, "size": 25, "dur": 4000, "color": 0xff0000 },
                { "mode": 5, "text": "前方高能，建议反复观看！！", "stime": 3000, "size": 25, "dur": 4000, "color": 0xff00ff },)
            CM.load(danmakuData)
            CM.start();

            setVideoEvent()

        })
        initCCL()
        // 字幕
        function initCCL() {
            CM = new CommentManager(document.querySelector("#comment-stage"));
            CM.init()

            // CM.load(danmakuData)
            // CM.start();
            CM.stop()

            // CM.time(500);
            // CM.time(1000)

        }

        function sendCCL(e) {
            const cclValue = document.querySelector("#cclValue")
            console.log(video.currentTime, CM);
            danmakuData.push({ "mode": 1, "text": cclValue.value, "stime": video.currentTime * 1000, "size": 25, "dur": 7000, "color": 0xffffff })
        }


        function setVideoEvent() {
            // 播放进度更新会调用
            video.addEventListener('timeupdate', function (e) {
                CM.time(video.currentTime * 1000);
            })
            // 进度条跳转到指定位置的时候触发
            video.addEventListener("seeked", e => {
                CM.clear()
            })
            //速度改变触发
            video.addEventListener("retachange",e=>{
                console.log(e);
            })
        }

    </script>
</body>

</html>