chuck0523/videoTagPractise.html

## videoTagPractise.html
<!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>
	<!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>