Skip to content

Instantly share code, notes, and snippets.

@kentarofujiy

kentarofujiy/index.html

Created July 26, 2018 03:41
Show Gist options
  • Save kentarofujiy/aab734d8cd432e892a4932d344e958b2 to your computer and use it in GitHub Desktop.
Save kentarofujiy/aab734d8cd432e892a4932d344e958b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<style id="jsbin-css">
#myVideo {
position: absolute;
width: 100%;
}
#myVideo2 {
position: absolute;
width: 100%;
}
#myVideo3 {
position: absolute;
width: 100%;
}
#playb1 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
z-index: 99;
}
#playb2 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
#playb3 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<video id="myVideo3" controls style="visibility: hidden">
<source src="https://s3.amazonaws.com/manaca/aids/oi2.mp4" type="video/mp4">
</video>
<div id="playb3" style="visibility: hidden"><h1>3</h1></div>
<video id="myVideo2" controls style="visibility: hidden">
<source src="https://s3.amazonaws.com/manaca/aids/oi3.mp4" type="video/mp4">
</video>
<div id="playb2" style="visibility: hidden"><h1>2</h1></div>
<div id="playb1" style="visibility: hidden"><h1>1</h1></div>
<video id="myVideo" controls style="visibility: visible">
<source src="https://s3.amazonaws.com/manaca/aids/oi5.mp4" type="video/mp4">
</video>
<script id="jsbin-javascript">
var vid = document.getElementById("myVideo");
var vid2 = document.getElementById("myVideo2");
var vid3 = document.getElementById("myVideo3");
var playbutton1 = document.getElementById("playb1");
var playbutton2 = document.getElementById("playb2");
var playbutton3 = document.getElementById("playb3");
var myVar;
function vid1assets() {
playbutton1.style.visibility = "hidden";
vid.style.visibility = "hidden";
vid2.style.visibility = "visible";
vid2.play();
}
function vid2assets() {
playbutton2.style.visibility = "hidden";
vid2.style.visibility = "hidden";
vid3.style.visibility = "visible";
vid3.play();
}
function vid3assets() {
playbutton3.style.visibility = "hidden";
vid3.style.visibility = "hidden";
vid.style.visibility = "visible";
vid.play();
}
vid.onended = function() {
playbutton1.style.visibility = "visible";
setTimeout(vid1assets, 5000);
};
vid2.onended = function() {
playbutton2.style.visibility = "visible";
setTimeout(vid2assets, 5000);
};
vid3.onended = function() {
playbutton3.style.visibility = "visible";
setTimeout(vid3assets, 5000);
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<body>
<video id="myVideo3" controls style="visibility: hidden">
<source src="https://s3.amazonaws.com/manaca/aids/oi2.mp4" type="video/mp4">
</video>
<div id="playb3" style="visibility: hidden"><h1>3</h1></div>
<video id="myVideo2" controls style="visibility: hidden">
<source src="https://s3.amazonaws.com/manaca/aids/oi3.mp4" type="video/mp4">
</video>
<div id="playb2" style="visibility: hidden"><h1>2</h1></div>
<div id="playb1" style="visibility: hidden"><h1>1</h1></div>
<video id="myVideo" controls style="visibility: visible">
<source src="https://s3.amazonaws.com/manaca/aids/oi5.mp4" type="video/mp4">
</video>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">#myVideo {
position: absolute;
width: 100%;
}
#myVideo2 {
position: absolute;
width: 100%;
}
#myVideo3 {
position: absolute;
width: 100%;
}
#playb1 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
z-index: 99;
}
#playb2 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
#playb3 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var vid = document.getElementById("myVideo");
var vid2 = document.getElementById("myVideo2");
var vid3 = document.getElementById("myVideo3");
var playbutton1 = document.getElementById("playb1");
var playbutton2 = document.getElementById("playb2");
var playbutton3 = document.getElementById("playb3");
var myVar;
function vid1assets() {
playbutton1.style.visibility = "hidden";
vid.style.visibility = "hidden";
vid2.style.visibility = "visible";
vid2.play();
}
function vid2assets() {
playbutton2.style.visibility = "hidden";
vid2.style.visibility = "hidden";
vid3.style.visibility = "visible";
vid3.play();
}
function vid3assets() {
playbutton3.style.visibility = "hidden";
vid3.style.visibility = "hidden";
vid.style.visibility = "visible";
vid.play();
}
vid.onended = function() {
playbutton1.style.visibility = "visible";
setTimeout(vid1assets, 5000);
};
vid2.onended = function() {
playbutton2.style.visibility = "visible";
setTimeout(vid2assets, 5000);
};
vid3.onended = function() {
playbutton3.style.visibility = "visible";
setTimeout(vid3assets, 5000);
};
</script></body>
</html>
Raw
jsbin.xuyuled.css
#myVideo {
position: absolute;
width: 100%;
}
#myVideo2 {
position: absolute;
width: 100%;
}
#myVideo3 {
position: absolute;
width: 100%;
}
#playb1 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
z-index: 99;
}
#playb2 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
#playb3 {
position: absolute;
width: 100px;
height: 50px;
margin-top: 25%;
margin-left: 40%;
background-color: magenta;
text-align: center;
padding-bottom: 25px;
}
Raw
jsbin.xuyuled.js
var vid = document.getElementById("myVideo");
var vid2 = document.getElementById("myVideo2");
var vid3 = document.getElementById("myVideo3");
var playbutton1 = document.getElementById("playb1");
var playbutton2 = document.getElementById("playb2");
var playbutton3 = document.getElementById("playb3");
var myVar;
function vid1assets() {
playbutton1.style.visibility = "hidden";
vid.style.visibility = "hidden";
vid2.style.visibility = "visible";
vid2.play();
}
function vid2assets() {
playbutton2.style.visibility = "hidden";
vid2.style.visibility = "hidden";
vid3.style.visibility = "visible";
vid3.play();
}
function vid3assets() {
playbutton3.style.visibility = "hidden";
vid3.style.visibility = "hidden";
vid.style.visibility = "visible";
vid.play();
}
vid.onended = function() {
playbutton1.style.visibility = "visible";
setTimeout(vid1assets, 5000);
};
vid2.onended = function() {
playbutton2.style.visibility = "visible";
setTimeout(vid2assets, 5000);
};
vid3.onended = function() {
playbutton3.style.visibility = "visible";
setTimeout(vid3assets, 5000);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment