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 {
            aspect-ratio: 16 / 9;
        }
    </style>
</head>

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

        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,
            airplay: true,
            moreVideoAttr: {
                'x5-video-player-type': 'h5',
                'x5-video-player-fullscreen': false,
                'x5-video-orientation': 'portraint',
                preload: "metadata"
            },
            subtitle: {
                url: '/assets/sample/subtitle.srt',
                style: {
                    color: '#48aff0',
                    fontSize: '16px',
                },
            },
            layers: [
                {
                    html: `<img width="50" src="/assets/sample/layer.png">`,
                    click: function () {
                        art.notice.show = "你点击了自定义层";
                    },
                    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/subtitle.svg">',
                    selector: [
                        {
                            html: '开关',
                            switch: true,
                            tooltip: '显示',
                            onSwitch: function (item) {
                                item.tooltip = item.switch ? '隐藏' : '显示';
                                art.subtitle.show = !item.switch;
                                return !item.switch;
                            },
                        },
                        {
                            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;
                    },
                },
            ],
            plugins: [
                artplayerPluginDanmuku({
                    danmuku: '/assets/sample/danmuku.xml',
                    speed: 5,
                    opacity: 1,
                    fontSize: 14,
                    color: '#FFFFFF',
                    mode: 0,
                    margin: [10, '25%'],
                    antiOverlap: true,
                    useWorker: true,
                    synchronousPlayback: false,
                    filter: (danmu) => danmu.text.length < 50,
                    lockTime: 5,
                    maxLength: 100,
                    minWidth: 150,
                    maxWidth: 0,
                    theme: 'light',
                    beforeEmit: (danmu) => !!danmu.text.trim(),
                }),
            ],
        });
    </script>
</body>

</html>