Created
July 11, 2015 03:06
-
-
Save chuck0523/fe4fd851f85b80d5c301 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> | |
<title>HTML5 video trial</title> | |
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
.wrapper { | |
position: relative; | |
width: 100%; | |
background-color: #333; | |
} | |
.videoContainer { | |
position: absolute; | |
} | |
.videoContainerS { | |
display: none; | |
} | |
.seaSunsetVideoS { | |
margin-top: 50px; | |
width: 100%; | |
} | |
.text { | |
position: fixed; | |
top: 0; | |
margin-left: 5%; | |
width: 90%; | |
height: 50px; | |
border-bottom: #fff 1px solid; | |
text-align: center; | |
line-height: 50px; | |
font-size: 20px; | |
letter-spacing: 2px; | |
color: #fff; | |
} | |
.buttons { | |
position: fixed; | |
bottom: 3%; | |
width: 100%; | |
text-align: center; | |
} | |
@media screen and (max-width : 600px) { | |
.videoContainer { | |
display: none; | |
} | |
.videoContainerS { | |
display: block; | |
} | |
.text { | |
top: 0; | |
border: none; | |
} | |
} | |
</style> | |
<script type="text/javascript" src="jquery.min.js"></script> | |
</head> | |
<body> | |
<div id="wrapper" class="wrapper"> | |
<header class="text">videoタグ(´ω`)のテスト</header> | |
<div id="videoContainer" class="videoContainer"> | |
<video id="seaSunsetVideo" autoplay loop class="seaSunsetVideo"> | |
<source src="All-set.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. | |
<source src="All-set.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. | |
</video> | |
<div class="poster hidden"> | |
<!-- <img src="All-set.jpg" alt=""> --> | |
</div> | |
</div> | |
<div class="videoContainerS"> | |
<video id="seaSunsetVideoS" autoplay loop class="seaSunsetVideoS"> | |
<source src="All-set.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. | |
<source src="All-set.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. | |
</video> | |
</div> | |
<div class="buttons"> | |
<button id="startVideo"><span class="glyphicon glyphicon-play"></span>見たい</button> | |
<button id="stopVideo"><span class="glyphicon glyphicon-stop"></span>見ない</button> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
var log = function(x){console.log(x);} | |
var adjustVideo = function() { | |
var wrap = $('#wrapper'), con = $('#videoContainer'), | |
video = $('#seaSunsetVideo'); | |
var winW = $(window).width(), winH = $(window).height(); | |
wrap.height(winH); | |
video.width(winW*0.6); | |
var centeringVideo = function(){ | |
var vW = video.width(), vH = video.height(); | |
con.css({ | |
'top' : (winH-vH)/2 - winH*0.1, | |
'left' : (winW-vW)/2 | |
}); | |
}; | |
centeringVideo(); | |
}; | |
adjustVideo(); | |
var toggleVideo = function(button) { | |
$('video').trigger(button); | |
} | |
$('#startVideo').on('click', function(){ | |
toggleVideo('play'); | |
}); | |
$('#stopVideo').on('click', function(){ | |
toggleVideo('pause'); | |
}); | |
$(window).resize(function(){ | |
adjustVideo(); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment