videojs / http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
https://videojs-http-streaming.netlify.app/
Other
2.52k stars 424 forks source link

add chapter plugin to stream file #1531

Open nassimabedi opened 3 months ago

nassimabedi commented 3 months ago

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>
welcome[bot] commented 3 months ago

šŸ‘‹ 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.