extend

分支 (4)

标签 (1)

管理

管理

extend

hls

mp4

old

mp4_001

tdplayer
/
test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>TDPLAYER</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="renderer" content="webkit">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script src="dist/tdplayer.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.header{
				text-align: center;
			}
			.header>.titile{
				color: #fff;
			}
			#v-dom{
				position: relative;
				height: 517px;
				width: 922px;
				margin: 0 auto;
				z-index: 5;
				box-shadow: rgba(221, 221, 221, 0.32) 0 0 2px;
			}
			.introduction{
				width: 922px;
				color: #fff;
				margin: 20px auto 20px auto;
			}
			.introduction>a{
				color: #fff;
				text-decoration:none;
			}
			.tp-video{
				margin-bottom: -4px;
			}
			body {
			    background-color:#d67e7e;
			}

			@media screen and (max-width: 910px) {
			    body{
			        background-color:lightblue;
			    }
			    #v-dom{
			    	position: absolute;
			    	width: 100%;

			    }
			    .introduction{
			    	width: auto;
			    }

			}
		</style>

	</head>
	<body>
		<header class="header"><img src="tdlogo.png"/>
			<h1 class="titile">A HTML5 VIDEO PLAYER WITH BARRAGE</h1>
		</header>
		<script type="text/javascript">
			document.querySelector('.titile').addEventListener('mouseenter',function(){
				console.log('mouseenter')
			})
		</script>
		<div id="v-dom"></div>
		<div class="introduction">
		<a href='http://www.acfun.cn/v/ac3662355'>ac3662355</a> 【武林文工团】白金窝窝头-白糖小约
		</div>
		<script type="text/javascript">
			tdvidplay({
				ele:document.querySelector('#v-dom'),
				vid:5114364,
				pic:'http://imgs.aixifan.com/content/2017_04_29/1493452620.jpg',
				ab:false
			})
		</script>
	</body>
</html>