github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/abplayer/demos/coverflow.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  	<head>
     4  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5  		<meta http-equiv="X-UA-Compatible" value="IE=9">
     6  		<link rel="stylesheet" href="../css/base.min.css?1" />
     7  		<title>New Interface Test for ABPlayer</title>
     8  		<script src="../js/CommentCoreLibrary.min.js"></script>
     9  		<script src="../js/ABPlayer.min.js"></script>
    10  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
    11  		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.js"></script>
    12  		<script src="coverflow/coverflow.js"></script>
    13  		<script src="coverflow/scroll.js"></script>
    14  		<style>
    15  		body{
    16  			background-color:#000;
    17  			overflow:hidden;
    18  		}
    19  		</style>
    20  		<script type="text/javascript">
    21  			window.addEventListener("load",function(){
    22  				var inst1 = ABP.create(document.getElementById("video1"), {
    23  					"src":document.getElementById("v1"),
    24  					"width":672,
    25  					"height":510,
    26  					"mobile":true
    27  				});
    28  				var inst2 = ABP.create(document.getElementById("video2"), {
    29  					"src":document.getElementById("v2"),
    30  					"width":672,
    31  					"height":510,
    32  					"mobile":true
    33  				});
    34  				var inst3 = ABP.create(document.getElementById("video3"), {
    35  					"src":document.getElementById("v3"),
    36  					"width":672,
    37  					"height":510,
    38  					"mobile":true
    39  				});
    40  				var inst4 = ABP.create(document.getElementById("video4"), {
    41  					"src":document.getElementById("v4"),
    42  					"width":672,
    43  					"height":510,
    44  					"mobile":true
    45  				});
    46  				CommentLoader("../comment.xml", inst2.cmManager);
    47  				CommentLoader("hanabi.xml", inst4.cmManager);
    48  				$('.coverflow').coverflow();
    49  			});
    50  		</script>
    51  	</head>
    52  	<body>
    53  		<div class="coverflow">
    54  			<div id="video1" class="cover"></div>
    55  			<div id="video2" class="cover"></div>
    56  			<div id="video3" class="cover"></div>
    57  			<div id="video4" class="cover"></div>
    58  		</div>
    59  
    60  		<script>
    61  			$(function() {
    62  				
    63  			});
    64  		</script>
    65  		<div style="display:none">
    66  			<video id="v2" autobuffer="true" data-setup="{}">
    67  				<source src="http://tools.kanoha.org/ccltestingvideos/otsukimi_recital.mp4" type="video/mp4">
    68  				<source src="http://tools.kanoha.org/ccltestingvideos/otsukimi_recital.webm" type="video/webm">
    69  			</video>
    70  			<video id="v1" autobuffer="true" data-setup="{}">
    71  				<source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
    72  				<source src="http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm" type="video/webm">
    73  			</video>
    74  			<video id="v3" autobuffer="true" data-setup="{}">
    75  				<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    76  			</video>
    77  			<video id="v4" autobuffer="true" data-setup="{}">
    78  				<source src="http://tools.kanoha.org/experimental/demo.mp4" type="video/mp4">
    79  			</video>
    80  		</div>
    81  		
    82  	</body>
    83  </html>