dreness/playbackRate_sandbox.html

## playbackRate_sandbox.html
<html>

<head>
    <title>html5 video / audio playbackRate sandbox</title>
    <style>
        body {
            height: 99%;
        }

        div {
            text-align: center;
            overflow: hidden;
        }

        div>video {
            vertical-align: top;
            width: 80%;
            height: 70%;
        }

        .chonky {
            font-size: 30px;
        }
    </style>
    <script>
        var v = [
            {
                URL: "https://dreness.com/bits/cool/Manamana.mpg",
                MIME: "video/mpeg"
            },
            {
                URL: "https://dreness.com/bits/cool/mario-paint-webgl.mp4",
                MIME: "video/mp4"
            },
            {
                URL: "https://trailers.apple.com/movies/independent/billie/billie-trailer-1_h1080p.mov",
                MIME: "video/mp4"
            },
            {
                URL: "https://dreness.com/bits/cool/the_roxy_performances_trailer.mp4",
                MIME: "video/mp4"
            }
        ]
        function setVideo(idx) {
            var video = document.querySelector("video");
            video.setAttribute('src', v[idx].URL)
            video.setAttribute('type', v[idx].MIME)
        }
    </script>
</head>

<body>
    <div>
        <video controls>
        </video>
    </div>

    <div>
        Apparently there is still no standard control for playback rate, so here are
        some iOS style 'buttons' for you ;)
        <p class="chonky">
            <a href="javascript:video.playbackRate = 0.5">0.5x</a>
            <a href="javascript:video.playbackRate = 0.9">0.9x</a>
            <a href="javascript:video.playbackRate = 1.0">1.0x</a>
            <a href="javascript:video.playbackRate = 1.1">1.1x</a>
            <a href="javascript:video.playbackRate = 1.5">1.5x</a>
            <a href="javascript:video.playbackRate = 2.0">2.0x</a>
            <a href="javascript:video.playbackRate = 3.0">3.0x</a>
        <p>
        <div class="chonky" id="vlist">
        </div>
        <script>
            var vlist = document.getElementById("vlist");
            for (i = 0; i < v.length; i++) {
                var a = document.createElement("a");
                a.href = 'javascript:setVideo(' + i + ')';
                a.innerHTML = i;
                vlist.appendChild(a);
                vlist.appendChild(document.createTextNode('\u00A0\u00A0'));
            }
        </script>
    </div>
</body>
<script>
    const video = document.querySelector("video");
    setVideo(0)
</script>

</html>
	<html>

	<head>
	<title>html5 video / audio playbackRate sandbox</title>
	<style>
	body {
	height: 99%;
	}

	div {
	text-align: center;
	overflow: hidden;
	}

	div>video {
	vertical-align: top;
	width: 80%;
	height: 70%;
	}

	.chonky {
	font-size: 30px;
	}
	</style>
	<script>
	var v = [
	{
	URL: "https://dreness.com/bits/cool/Manamana.mpg",
	MIME: "video/mpeg"
	},
	{
	URL: "https://dreness.com/bits/cool/mario-paint-webgl.mp4",
	MIME: "video/mp4"
	},
	{
	URL: "https://trailers.apple.com/movies/independent/billie/billie-trailer-1_h1080p.mov",
	MIME: "video/mp4"
	},
	{
	URL: "https://dreness.com/bits/cool/the_roxy_performances_trailer.mp4",
	MIME: "video/mp4"
	}
	]
	function setVideo(idx) {
	var video = document.querySelector("video");
	video.setAttribute('src', v[idx].URL)
	video.setAttribute('type', v[idx].MIME)
	}
	</script>
	</head>

	<body>
	<div>
	<video controls>
	</video>
	</div>

	<div>
	Apparently there is still no standard control for playback rate, so here are
	some iOS style 'buttons' for you ;)
	<p class="chonky">
	<a href="javascript:video.playbackRate = 0.5">0.5x</a>
	<a href="javascript:video.playbackRate = 0.9">0.9x</a>
	<a href="javascript:video.playbackRate = 1.0">1.0x</a>
	<a href="javascript:video.playbackRate = 1.1">1.1x</a>
	<a href="javascript:video.playbackRate = 1.5">1.5x</a>
	<a href="javascript:video.playbackRate = 2.0">2.0x</a>
	<a href="javascript:video.playbackRate = 3.0">3.0x</a>
	<p>
	<div class="chonky" id="vlist">
	</div>
	<script>
	var vlist = document.getElementById("vlist");
	for (i = 0; i < v.length; i++) {
	var a = document.createElement("a");
	a.href = 'javascript:setVideo(' + i + ')';
	a.innerHTML = i;
	vlist.appendChild(a);
	vlist.appendChild(document.createTextNode('\u00A0\u00A0'));
	}
	</script>
	</div>
	</body>
	<script>
	const video = document.querySelector("video");
	setVideo(0)
	</script>

	</html>