chapter with streaming - Githubissues

nassimabedi commented 1 month ago

Is it possible to stream hls file with chapters here is my code: the result of the code is stream file without display chapters

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/artplayer/dist/artplayer.css">
    <title>ArtPlayer with HLS Quality and Chapters</title>
    <style>
        #artplayer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="artplayer"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"></script>
    <script src="https://artplayer.org/uncompiled/artplayer-plugin-hls-quality/index.js"></script>
    <script src="https://artplayer.org/uncompiled/artplayer-plugin-chapter/index.js"></script>
    <script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const art = new Artplayer({
                container: '#artplayer',
                url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', // Replace with your HLS URL
                type: 'm3u8',
                autoSize: true,
                autoMini: true,
                playbackRate: true,
                setting: true,
                aspectRatio: true,
                fullscreen: true,
                fullscreenWeb: true,
                plugins: [
                    artplayerPluginHlsQuality({
                        control: true,
                        setting: true,
                        title: 'Quality',
                    }),
                    artplayerPluginChapter({
                        chapters: [
                            {
                                time: 10,
                                text: 'Introduction',
                            },
                            {
                                time: 60,
                                text: 'Main Topic',
                            },
                            {
                                time: 120,
                                text: 'Conclusion',
                            },
                            {
                                time: 600,
                                text: 'end',
                            },

                        ],
                        title: 'Chapters',
                    }),
                ],
                customType: {
                    m3u8: (video, url) => {
                        if (Hls.isSupported()) {
                            const hls = new Hls();
                            hls.loadSource(url);
                            hls.attachMedia(video);
                        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                            video.src = url;
                        }
                    },
                },
            });
        });
    </script>
</body>
</html>

zhw2590582 commented 1 month ago

It can only support the on-demand HLS. The live broadcast HLS does not support it. It is thought that the display of Chapters is dependent on duration. The live broadcast does not have an accurate duration: demo%20%7B%0A%09%09if%20(art.hls)%20art.hls.destroy()%3B%0A%09%09const%20hls%20%3D%20new%20Hls()%3B%0A%09%09hls.loadSource(url)%3B%0A%09%09hls.attachMedia(video)%3B%0A%09%09art.hls%20%3D%20hls%3B%0A%09%09art.on(%27destroy%27%2C%20()%20%3D%3E%20hls.destroy())%3B%0A%09%7D%20else%20if%20(video.canPlayType(%27application%2Fvnd.apple.mpegurl%27))%20%7B%0A%09%09video.src%20%3D%20url%3B%0A%09%7D%20else%20%7B%0A%09%09art.notice.show%20%3D%20%27Unsupported%20playback%20format%3A%20m3u8%27%3B%0A%09%7D%0A%7D%0A%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%09container%3A%20%27.artplayer-app%27%2C%0A%09url%3A%20%27https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8%27%2C%0A%09type%3A%20%27m3u8%27%2C%0A%09customType%3A%20%7B%0A%09%09m3u8%3A%20playM3u8%2C%0A%09%7D%2C%0A%09plugins%3A%20%5B%0A%09%09artplayerPluginChapter(%7B%0A%09%09%09chapters%3A%20%5B%0A%09%09%09%09%7B%20start%3A%200%2C%20end%3A%20120%2C%20title%3A%20%27One%20more%20chance%27%20%7D%2C%0A%09%09%09%09%7B%20start%3A%20120%2C%20end%3A%20240%2C%20title%3A%20%27%E8%B0%81%E3%81%A7%E3%82%82%E3%81%84%E3%81%84%E3%81%AF%E3%81%9A%E3%81%AA%E3%81%AE%E3%81%AB%27%20%7D%2C%0A%09%09%09%09%7B%20start%3A%20240%2C%20end%3A%20360%2C%20title%3A%20%27%E5%A4%8F%E3%81%AE%E6%83%B3%E3%81%84%E5%87%BA%E3%81%8C%E3%81%BE%E3%82%8F%E3%82%8B%27%20%7D%2C%0A%09%09%09%09%7B%20start%3A%20360%2C%20end%3A%20480%2C%20title%3A%20%27%E3%81%93%E3%82%93%E3%81%AA%E3%81%A8%E3%81%93%E3%81%AB%E3%81%82%E3%82%8B%E3%81%AF%E3%81%9A%E3%82%82%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AB%27%20%7D%2C%0A%09%09%09%09%7B%20start%3A%20480%2C%20end%3A%20Infinity%2C%20title%3A%20%27%E7%BB%88%E3%82%8F%E3%82%8A%27%20%7D%2C%0A%09%09%09%5D%0A%09%09%7D)%2C%0A%09%5D%2C%0A%7D)%3B)

nassimabedi commented 1 month ago

Thank you for your response :) But we have it on youtube. You mean HLS file must have chapters am I right?

zhw2590582 commented 1 month ago

No, HLS and Chapters are not associated. Chapters is related to duration

nassimabedi commented 1 month ago

Thank you

nassimabedi commented 1 month ago

I do it with video js: https://gist.github.com/nassimabedi/44ffe67fa4b37a2c087e0ee4fa5d529f

zhw2590582 / ArtPlayer

chapter with streaming #794