mpegts.js播放http/ts示例

弘道者發表於2024-06-21
JSHTTP

直接上程式碼，簡單的頁面播放一個http/ts的直播

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ts player</title></head>
<body>
    <div>
        <video name="videoElement" width="640" height="480" controls="" muted="true" autoplay="">
            Your browser is too old which doesn't support HTML5 video.
        </video>
    </div>

    <script src="./mpegts.js"></script>
    <script>
        function player_load() {
            var mediaDataSource = {
                type: 'mse'
            };
            mediaDataSource.isLive = true;
            mediaDataSource.withCredentials = false;
            mediaDataSource.liveBufferLatencyChasing = true;
            mediaDataSource.url = "http://192.168.8.201:6803/";
            console.log('MediaDataSource', mediaDataSource);
            player_load_mds(mediaDataSource);
        }

        function player_load_mds(mediaDataSource) {
            var element = document.getElementsByName('videoElement')[0];
            if (typeof player !== "undefined") {
                if (player != null) {
                    player.unload();
                    player.detachMediaElement();
                    player.destroy();
                    player = null;
                }
            }
            player = mpegts.createPlayer(mediaDataSource, {
                enableWorker: true,
                lazyLoadMaxDuration: 3,
                liveBufferLatencyChasing: true,
            });
            player.attachMediaElement(element);
            player.load();
        }

        function player_start() { player.play();}
        function player_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
        document.addEventListener('DOMContentLoaded', function () {
            player_load();
        });
    </script>
</body>
</html>

相關文章