p0358/videoplayer.html

## videoplayer.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <meta property="og:title" content="Video Player" />
    <meta property="og:description" content="Simple video player which allows you to play videos being fed with a direct link to them, with native controls, on the entire page. Good for use with Metastream, where it will nicely cooperate with it, unlike many source pages which have interferencing scripts." />
    <meta property="og:type" content="video.other" />
    <title>Video</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #1D1B19;
            color: #FFF;
        }
        video {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #a {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            margin-left: auto;
            transform: translate(-50%, -50%);
            font-family: Roboto, Helvetica, Arial, sans-serif;
            font-size: 2.5em;
            max-width: 90%;
        }
        #a > div > input {
            float: left;
            padding: 5px;
            box-sizing: border-box;
            height: 32px;
        }
        #a > div > input[type="text"] {
            width: calc(100% - 45px - 5px);
            margin-right: 5px;
        }
        #a > div > input[type="button"] {
            width: 45px;
        }
    </style>
</head>
<body>
    <div id="a">
        Enter video direct URL:<br>
        <div>
            <input type="text" id="url">
            <input type="button" value="Play" id="playButton">
        </div>
    </div>
    <script>
        function playVideo(url) {
            if (!url || !url.trim || !url.trim()) return;
            document.getElementById("a").remove();
            let video = document.createElement("video");
            video.src = url;
            video.controls = true;
            video.oncanplay = () => {
                document.title = 'Video from ' + (new URL(url).hostname);
                if (video.title) document.title = video.title;
            };
            document.body.appendChild(video);
            document.location.hash = url;
        }

        document.getElementById("playButton").addEventListener("click", () => {
            let url = document.getElementById("url").value;
            playVideo(url);
        });

        if (document.location.hash) {
            let url = document.location.hash.substr(1);
            playVideo(url);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="referrer" content="no-referrer">
	<meta property="og:title" content="Video Player" />
	<meta property="og:description" content="Simple video player which allows you to play videos being fed with a direct link to them, with native controls, on the entire page. Good for use with Metastream, where it will nicely cooperate with it, unlike many source pages which have interferencing scripts." />
	<meta property="og:type" content="video.other" />
	<title>Video</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #1D1B19;
	color: #FFF;
	}
	video {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	#a {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	margin-left: auto;
	transform: translate(-50%, -50%);
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 2.5em;
	max-width: 90%;
	}
	#a > div > input {
	float: left;
	padding: 5px;
	box-sizing: border-box;
	height: 32px;
	}
	#a > div > input[type="text"] {
	width: calc(100% - 45px - 5px);
	margin-right: 5px;
	}
	#a > div > input[type="button"] {
	width: 45px;
	}
	</style>
	</head>
	<body>
	<div id="a">
	Enter video direct URL:<br>
	<div>
	<input type="text" id="url">
	<input type="button" value="Play" id="playButton">
	</div>
	</div>
	<script>
	function playVideo(url) {
	if (!url \|\| !url.trim \|\| !url.trim()) return;
	document.getElementById("a").remove();
	let video = document.createElement("video");
	video.src = url;
	video.controls = true;
	video.oncanplay = () => {
	document.title = 'Video from ' + (new URL(url).hostname);
	if (video.title) document.title = video.title;
	};
	document.body.appendChild(video);
	document.location.hash = url;
	}

	document.getElementById("playButton").addEventListener("click", () => {
	let url = document.getElementById("url").value;
	playVideo(url);
	});

	if (document.location.hash) {
	let url = document.location.hash.substr(1);
	playVideo(url);
	}
	</script>
	</body>
	</html>