zeratax/player.html

## player.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body { background-color: #001f3f; }
        video {
                max-width: 1920px;
                width: 90vw;
                max-height: 1080px;
        }
        .center {
                display: flex;
                justify-content: center;
                align-items: center;
        }
        .hidden { display: none !important; }
    </style>
</head>

<body>
    <section>
        <div class="center">
            <div>
                <video id="videoElement" class="hidden"></video>
                <form id="player" action="#">
                    <input id="stream" placeholder="stream">
                    <input id="password" placeholder="password">
                    <button id="submit">submit</button>
                </form>
            </div>
        </div>

    <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script>
        const stream = document.getElementById('stream')
        const password = document.getElementById('password')
        const form = document.getElementById("player");
        const urlParams = new URLSearchParams(window.location.search)

        stream.value = urlParams.get("stream")

        form.addEventListener("submit", function (event) {
            event.preventDefault();
            submit();
        });
        submit = () => {
            openVideo(stream.value, password.value)
        }

        openVideo = (stream, password) => {
            const ext = Date.now() + 30000;
            const key = CryptoJS.MD5(`/live/${stream}-${ext}-${password}`)
            const flvURL = `wss://streaming.dmnd.sh/live/${stream}.flv?sign=${ext}-${key}`
            const rtmpURL = `rtmp://streaming.dmnd.sh/live/${stream}?sign=${ext}-${key}`
            console.log(flvURL)
            console.log(rtmpURL)

            if (flvjs.isSupported()) {
                const videoElement = document.getElementById('videoElement')
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: flvURL
                })
                flvPlayer.attachMediaElement(videoElement)
                flvPlayer.load()
                videoElement.classList.remove("hidden")
                videoElement.setAttribute("controls","")
                flvPlayer.play()
            }
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<style>
	body { background-color: #001f3f; }
	video {
	max-width: 1920px;
	width: 90vw;
	max-height: 1080px;
	}
	.center {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.hidden { display: none !important; }
	</style>
	</head>

	<body>
	<section>
	<div class="center">
	<div>
	<video id="videoElement" class="hidden"></video>
	<form id="player" action="#">
	<input id="stream" placeholder="stream">
	<input id="password" placeholder="password">
	<button id="submit">submit</button>
	</form>
	</div>
	</div>

	<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
	<script>
	const stream = document.getElementById('stream')
	const password = document.getElementById('password')
	const form = document.getElementById("player");
	const urlParams = new URLSearchParams(window.location.search)

	stream.value = urlParams.get("stream")

	form.addEventListener("submit", function (event) {
	event.preventDefault();
	submit();
	});
	submit = () => {
	openVideo(stream.value, password.value)
	}

	openVideo = (stream, password) => {
	const ext = Date.now() + 30000;
	const key = CryptoJS.MD5(`/live/${stream}-${ext}-${password}`)
	const flvURL = `wss://streaming.dmnd.sh/live/${stream}.flv?sign=${ext}-${key}`
	const rtmpURL = `rtmp://streaming.dmnd.sh/live/${stream}?sign=${ext}-${key}`
	console.log(flvURL)
	console.log(rtmpURL)

	if (flvjs.isSupported()) {
	const videoElement = document.getElementById('videoElement')
	const flvPlayer = flvjs.createPlayer({
	type: 'flv',
	url: flvURL
	})
	flvPlayer.attachMediaElement(videoElement)
	flvPlayer.load()
	videoElement.classList.remove("hidden")
	videoElement.setAttribute("controls","")
	flvPlayer.play()
	}
	}
	</script>
	</body>

	</html>