flavioribeiro/gist:2789722

## gistfile1.txt

<html>
    <head>
        <style>
            #content {
                margin: 0 auto;
                text-align: center;
            }
            #controls * {
                font-size: 2.5em;
            }
            #slower, #play, #pause {
                margin-left: 5em;
            }
            #url {
                width: 60%;
            }
        </style>
    <title>Watch html5 videos</title>
    </head>
    <body>
        <div id="content">
            <div>
                <label for="url">Video URL:</label>
                <input type="text" value="http://liveips.nasa.gov.edgesuite.net/msfc/Edge.m3u8" id="url" />
                <input type="submit" value="OK" id="change" />
            </div>
            <video id="myvideo" controls="controls">
            </video>
            <div id="controls">
                <a href="#" id="faster">faster</a>
                <a href="#" id="slower">slower</a>
            </div>
        </div>
        <script type="text/javascript">
            var myvideo = document.getElementById("myvideo");
            myvideo.defaultPlaybackRate = 1.0;
            myvideo.playbackRate = 1.0;

            document.getElementById("change").onclick = function(){
                myvideo.src = document.getElementById("url").value;
            };
            document.getElementById("faster").onclick = function(){
                myvideo.playbackRate += 0.4;
            };
            document.getElementById("slower").onclick = function(){
                myvideo.playbackRate -= 0.4;
            };
        </script>
    </body>
</html>

	<html>
	<head>
	<style>
	#content {
	margin: 0 auto;
	text-align: center;
	}
	#controls * {
	font-size: 2.5em;
	}
	#slower, #play, #pause {
	margin-left: 5em;
	}
	#url {
	width: 60%;
	}
	</style>
	<title>Watch html5 videos</title>
	</head>
	<body>
	<div id="content">
	<div>
	<label for="url">Video URL:</label>
	<input type="text" value="http://liveips.nasa.gov.edgesuite.net/msfc/Edge.m3u8" id="url" />
	<input type="submit" value="OK" id="change" />
	</div>
	<video id="myvideo" controls="controls">
	</video>
	<div id="controls">
	<a href="#" id="faster">faster</a>
	<a href="#" id="slower">slower</a>
	</div>
	</div>
	<script type="text/javascript">
	var myvideo = document.getElementById("myvideo");
	myvideo.defaultPlaybackRate = 1.0;
	myvideo.playbackRate = 1.0;

	document.getElementById("change").onclick = function(){
	myvideo.src = document.getElementById("url").value;
	};
	document.getElementById("faster").onclick = function(){
	myvideo.playbackRate += 0.4;
	};
	document.getElementById("slower").onclick = function(){
	myvideo.playbackRate -= 0.4;
	};
	</script>
	</body>
	</html>