CODEWITHSUNDEEP
javascriptmedia-source
Vitalii
Vitalii

Reputation: 107

Media Source Extension issue on change for new segments

there

I have two videos segments array

video1 = ['v1_1.ts','v1_2.ts','v1_3.ts','v1_4.ts',...]
video2 = ['v2_1.ts','v2_2.ts','v2_3.ts','v2_4.ts',...]

MSE is working perfect with playing video1 segments, but when I try to play video segments 2 nothing happened

I can't even restart playing video1 segments

Can anyone explain, how to start playing new video segments in Media Source Extension

    <html>
    <head>
        <title>Basic Transmuxer Test</title>
    </head>
    <body>
    <div><button onclick="play1()">Restart video</button>
    <video controls width="80%"></video>
    <script src="https://github.com/videojs/mux.js/releases/latest/download/mux.js"></script>
    <script>
        // Create array of TS files to play
        segments = [
            "segment_1.ts",
            "segment_2.ts",
            "segment_3.ts",
            "segment_4.ts"
        ];
    
        // Replace this value with your files codec info
        mime = 'video/mp4; codecs="mp4a.40.2,avc1.64001f"';
    
        let mediaSource = new MediaSource();
    
        mediaSource.addEventListener('error', function(err) {
            throw new Error("MSE: " + err.message);
        });
    
        let sourceBuffer = null;
        let transmuxer = new muxjs.mp4.Transmuxer();
    
        video = document.querySelector('video');
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener("sourceopen", appendFirstSegment);
    
    
        function play1(){
    
            sourceBuffer.abort();
    
    
            segments = [
                "segment_0.ts",
                "segment_1.ts",
                "segment_2.ts",
                "segment_3.ts",
                "segment_4.ts",
                "segment_5.ts",
                "segment_6.ts",
                "segment_7.ts",
                "segment_8.ts",
                "segment_9.ts"
            ];
    
            appendFirstSegment()
    
        }
    
    
    
        function appendFirstSegment(){
            if (segments.length == 0){
                return;
            }
    
            console.log('appendFirstSegment')
    
            if(!sourceBuffer){
                sourceBuffer = mediaSource.addSourceBuffer(mime);
                sourceBuffer.mode = 'sequence';
            }
    
            //mediaSource.duration = 0;
    
            sourceBuffer.addEventListener('updateend', appendNextSegment,false);
    
            transmuxer.off('data');
            transmuxer.on('data', (segment) => {
                let data = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
                data.set(segment.initSegment, 0);
                data.set(segment.data, segment.initSegment.byteLength);
                console.log(muxjs.mp4.tools.inspect(data));
                sourceBuffer.appendBuffer(data);
            })
    
            fetch(segments.shift()).then((response)=>{
                return response.arrayBuffer();
            }).then((response)=>{
                transmuxer.push(new Uint8Array(response));
                transmuxer.flush();
            })
        }
    
        function appendNextSegment(){
            // reset the 'data' event listener to just append (moof/mdat) boxes to the Source Buffer
            transmuxer.off('data');
            transmuxer.on('data', (segment) =>{
                sourceBuffer.appendBuffer(new Uint8Array(segment.data));
            })
    
            if (segments.length == 0){
                // notify MSE that we have no more segments to append.
                //mediaSource.endOfStream();
            }
    
            if(segments.length>0){
                fetch(segments.shift()).then((response)=>{
                    return response.arrayBuffer();
                }).then((response)=>{
                    transmuxer.push(new Uint8Array(response));
                    transmuxer.flush();
                })
            }
    
        }
    </script>
    </body>
    </html>

Upvotes: 1

Views: 754

Answers (0)

Related Questions