ArtPlayer/docs/mobile.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Artplayer.js</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="keywords" content="artplayer, player, js, html5, video" />
    <meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
    <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./assets/css/normalize.css">
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }

        .artplayer-app {
            width: 100%;
            height: 50%;
        }

        .tip {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="artplayer-app"></div>
        <p class="tip"></p>
    </div>
    <script src="./assets/js/vconsole.min.js"></script>
    <script src="./uncompiled/artplayer/index.js"></script>
    <script src="./uncompiled/artplayer-plugin-danmuku/index.js"></script>
    <script>
        var vConsole = new VConsole();

        var art = new Artplayer({
            container: '.artplayer-app',
            url: '/assets/sample/video.mp4',
            title: 'One More Time One More Chance',
            poster: '/assets/sample/poster.jpg',
            autoSize: true,
            loop: true,
            mutex: true,
            setting: true,
            flip: true,
            lock: true,
            fastForward: true,
            playbackRate: true,
            aspectRatio: true,
            theme: '#ff0057',
            fullscreen: true,
            fullscreenWeb: true,
            miniProgressBar: true,
            autoOrientation: true,
            moreVideoAttr: {
                'x5-video-player-type': 'h5',
                'x5-video-player-fullscreen': false,
                'x5-video-orientation': 'portraint',
            },
            subtitle: {
                style: {
                    color: '#48aff0',
                    fontSize: '14px',
                },
            },
            layers: [
                {
                    html: `<img width="50" src="/assets/sample/layer.png">`,
                    click: function () {
                        console.info('You clicked on the custom layer');
                    },
                    style: {
                        position: 'absolute',
                        top: '10px',
                        right: '10px',
                        opacity: '.9',
                    },
                },
            ],
            icons: {
                loading: '<img src="/assets/img/ploading.gif">',
                state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
                indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
            },
            settings: [
                {
                    width: 200,
                    html: '切换字幕',
                    tooltip: '中日双语',
                    icon: '<img width="22" heigth="22" src="/assets/img/indicator.svg">',
                    selector: [
                        {
                            default: true,
                            html: '中日双语',
                            url: '/assets/sample/subtitle.srt'
                        },
                        {
                            html: '中文',
                            url: '/assets/sample/subtitle.cn.srt'
                        },
                        {
                            html: '日文',
                            url: '/assets/sample/subtitle.jp.srt'
                        },
                    ],
                    onSelect: function (item) {
                        art.subtitle.switch(item.url, {
                            name: item.html
                        });
                        return item.html;
                    },
                },
            ],
            controls: [
                {
                    position: 'right',
                    html: '<img width="22" heigth="22" src="/assets/img/danmu-on.svg">',
                    click: function (_, event) {
                        if (art.plugins.artplayerPluginDanmuku.isHide) {
                            art.plugins.artplayerPluginDanmuku.show();
                            event.target.src = '/assets/img/danmu-on.svg';
                        } else {
                            art.plugins.artplayerPluginDanmuku.hide();
                            event.target.src = '/assets/img/danmu-off.svg';
                        }
                    },
                },
            ],
            plugins: [
                artplayerPluginDanmuku({
                    danmuku: '/assets/sample/danmuku-v2.xml',
                    speed: 5,
                    opacity: 1,
                    fontSize: 14,
                    maxlength: 100,
                    margin: ['10%', 60],
                    antiOverlap: true,
                    synchronousPlayback: false,
                    filter: (danmu) => danmu.text.length < 50,
                    // filter: (danmu) => danmu.mode === 0,
                }),
            ],
            whitelist: ['*'],
        });

        Artplayer.config.events.forEach(function (item) {
            art.on('video:' + item, function (event) {
                console.log('video: ' + event.type);
            });
        });

        if (Artplayer.utils.isWechat) {
            document.querySelector('.tip').textContent = '微信环境需手动触发播放';
            let isClick = false;
            document.body.addEventListener('click', () => {
                if (!isClick) {
                    isClick = true;
                    art.play();
                }
            });
        }

    </script>
</body>

</html>