Skip to content

Instantly share code, notes, and snippets.

@A-J-C

A-J-C/PythonMOOC

Last active December 18, 2015 21:19
Show Gist options
  • Save A-J-C/5846833 to your computer and use it in GitHub Desktop.
Save A-J-C/5846833 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PythonMOOC
<!DOCTYPE html>
<html>
<head>
<title>Video Attributes</title>
</head>
<script>
function speed(x){
var myVid=document.getElementById("pythonVid");
myVid.playbackRate=x;
$('#pbrate').html(x);
}
function setVid(x) {
var myVid = document.getElementById('pythonVid');
$(myVid).attr('src', x);
};
$(document).ready(function(){
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('#change').click(function() {
setVid($("#videoURL").val());
});
$("#speedSubmit").click(function(){
if (!isNaN(parseFloat($("#speedInput").val(),10))) {
speed(parseFloat($("#speedInput").val(),10));
} else {
alert("Please input a number.")
}
$("#speedInput").val("").focus()
});
$('#speedInput').bind("enterKey",function(e){
$("#speedSubmit").click()
});
$('#speedInput').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
});
</script>
<style>
body {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
text-align:center;
}
a {
text-decoration:none;
color:#DBDBDB;
padding:5px;
}
a:hover{
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
form{
background:#D6D0D2;
color:#5C5759;
width:200px;
margin:-25px;
margin-left:225px;
border-radius:10px;
}
video{
height:100%;
width:100%;
}
#change{
background:#E6EDED;
border-radius:5px;
}
#change:hover{
background:#37F087;
color:#0D2763;
border-radius:5px;
}
#links{
margin-left:50px;
font-weight:bold;
}
#center{
position: fixed;
left: 50%;
margin-top: 50px;
margin-left: -400px;
}
#videoURL{
background:#9C9899;
color:#5C5759;
border-radius:5px;
}
.panel {
height:100px;
width:100px;
display:none;
}
.pull-me {
display:block;
position:relative;
right:250px;
width:150px;
height:20px;
font-family:arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#636061;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
margin-left:500px;
}
#left{
height:480px;
width:150px;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
border-radius:10px;
color:white;
text-align: centre;
}
.title {
text-decoration:underline;
font-weight:bold;
padding:5px;
}
</style>
<body>
<div id="center">
<div class="panel">
<form name="input">
Video URL: <input type="text" id="videoURL">
<input type="button" value="Change Video" id="change"/>
</form>
</div>
<p class="slide">
<a class="pull-me">Set Video</a>
</p>
<video controls="controls" id="pythonVid" auutoplay="autoplay">
<source src="http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec02_300k.mp4"/>
Your browser does not support the HTML5 video tag.
</video>
<div id ="links">
<a href="javascript:speed(0.5)">0.5x</a>
<a href="javascript:speed(1.0)">1x</a>
<a href="javascript:speed(1.2)">1.25x</a>
<a href="javascript:speed(1.5)">1.5x</a>
<a href="javascript:speed(1.75)">1.75x</a>
<a href="javascript:speed(2.0)">2x</a>
<a href="javascript:speed(2.5)">2.5x</a>
<a href="javascript:speed(3.0)">3x</a>
</div>
<input type="text" placeholder="Input Desired Speed" id="speedInput" /><input type="submit" value="Change Speed" id="speedSubmit" />
</div>
<div id="left">
<p class="title"> Lectures </p>
<p><a href="javascript:setVid('http://ia600806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec01_300k.mp4')"> Lecture 1 </a> </p>
<p><a href="javascript:setVid('http://ia600806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec02_300k.mp4')"> Lecture 2 </a> </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec03_300k.mp4')"> Lecture 3 </a> </p>
<p><a href="javascript:setVid('http://ia600806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec04_300k.mp4')"> Lecture 4 </a> </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec05_300k.mp4')"> Lecture 5 </a> </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec06_300k.mp4')"> Lecture 6 </a> </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_lec07_300k.mp4')"> Lecture 7 </a> </p>
<p class="title"> Recitation </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_rec01_300k.mp4')"> Reciation 1 </a> </p>
<p><a href="javascript:setVid('http://ia700806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_rec02_300k.mp4')"> Reciation 2 </a> </p>
<p><a href="javascript:setVid('http://ia600806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_rec03_300k.mp4')"> Reciation 3 </a> </p>
<p><a href="javascript:setVid('http://ia600806.us.archive.org/25/items/MIT6.00SCS11/MIT6_00SCS11_rec04_300k.mp4')"> Reciation 4 </a> </p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment