github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/abplayer/demo.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.css?1" />
     7  		<title>New Interface Test for ABPlayer</title>
     8  		<script src="mobile.js"></script>
     9  		<script src="CommentCoreLibrary.js"></script>
    10  		<script src="libxml.js"></script>
    11  		<script src="player.js"></script>
    12  		<script type="text/javascript">
    13  			window.addEventListener("load",function(){
    14  				var inst = ABP.bind(document.getElementById("player1"), isMobile());
    15  				CommentLoader("comment.xml", inst.cmManager);
    16  				inst.txtText.focus();
    17  				inst.txtText.addEventListener("keydown", function(e){
    18  					if(e && e.keyCode === 13){
    19  						if(/^!/.test(this.value)) return; //Leave the internal commands
    20  						inst.txtText.value = "";
    21  					}
    22  				});
    23  				window.abpinst = inst;
    24  				
    25  				window.acpinst = ABP.create(document.getElementById("toBeInjected"), {"src":document.getElementById("new-video")});
    26  			});
    27  		</script>
    28  	</head>
    29  	<body>
    30  		<div id="player1" class="ABP-Unit" style="width:640px;height:480px;" tabindex="1">
    31  			<div class="ABP-Video">
    32  				<div class="ABP-Container"></div>
    33  				<video id="abp-video" autobuffer="true" data-setup="{}">
    34  					<source src="http://tools.kanoha.org/ccltestingvideos/otsukimi_recital.mp4" type="video/mp4">
    35  					<source src="http://tools.kanoha.org/ccltestingvideos/otsukimi_recital.webm" type="video/webm">
    36  					<!-- // END VIDEO 1-->
    37  					<!-- START VIDEO 2
    38  					<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    39  					// END VIDEO 2-->
    40  					<!-- START VIDEO 3
    41  					<source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
    42  					<source src="http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm" type="video/webm">
    43  					// END VIDEO 3-->
    44  					<p>Your browser does not support html5 video!</p>
    45  				</video>
    46  				
    47  			</div>
    48  			<div class="ABP-Text">
    49  				<input type="text">
    50  			</div>
    51  			<div class="ABP-Control">
    52  				<div class="button ABP-Play"></div>
    53  				<div class="progress-bar">
    54  					<div class="bar dark"></div>
    55  					<div class="bar"></div>
    56  				</div>
    57  				<div class="button ABP-CommentShow"></div>
    58  				<div class="button ABP-FullScreen"></div>
    59  			</div>
    60  		</div>
    61  		<video id="new-video" autobuffer="true" data-setup="{}">
    62  			<source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
    63  			<source src="http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm" type="video/webm">
    64  			<p>Your browser does not support html5 video!</p>
    65  		</video>
    66  		<div id="toBeInjected"></div>
    67  		<p>Supports mobile. Swipe right to play, left to pause. Up to increase volume and down to decrease volume. Mobile interface auto-enabled on mobile devices.</p>
    68  	</body>
    69  </html>