add chapter plugin to stream file

Question

add chapter plugin to stream file

Opened this issue 5 months ago · 1 comments

Is it possible to add plugin chapters to stream video? here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css" rel="stylesheet">
    <title>Video.js with Chapters and HLS Quality</title>
    <style>
        #my-video {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
        <!-- Source will be dynamically set -->
    </video>

    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-markers@0.7.0/dist/videojs.markers.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.7/hls.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const player = videojs('my-video');

            // Set up HLS.js
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'); // Replace with your HLS URL
                hls.attachMedia(player.el().querySelector('video'));
                hls.on(Hls.Events.MANIFEST_PARSED, function() {
                    player.src({
                        src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
                        type: 'application/x-mpegURL'
                    });
                });
            } else if (player.el().querySelector('video').canPlayType('application/vnd.apple.mpegurl')) {
                player.src({
                    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
                    type: 'application/x-mpegURL'
                });
            }

            // Initialize quality selector
            player.qualityLevels();
            player.hlsQualitySelector({
                displayCurrentQuality: true,
            });

            // Initialize chapters (markers)
            player.markers({
                markers: [
                    {
                        time: 10,
                        text: 'Introduction',
                    },
                    {
                        time: 60,
                        text: 'Main Topic',
                    },
                    {
                        time: 120,
                        text: 'Conclusion',
                    },
                ],
            });
        });
    </script>
</body>
</html>

Answer 1 · 2024-08-07T09:22:13.000Z

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.