代码下载Html5初探-视频元素video示例

文章结束给大家来个程序员笑话：[M]

         这个还是承接上一篇文章《盘光项目所学》，是在盘光项目中要需的一些单简的技巧，自己在学习的中程过做的一个demo。关于html5方面，我并没有太多的深入研究，所以也说不出什么理论的货色，仅将示例代码贴出来，以便各位读者参考。另外在我的资源中也有更多的代码示例，可以点击下载（费免的哦）

          道理方面的货色可以去w3school中去看查一下，蛮单简的，另外也可以下载些书看看，一看就懂。当然我这个例子中讲的也挺全的哦。

            下图是我示例的录目构结：

         

            html代码：           

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sundensky's website</title>
<link rel="stylesheet" href="../css/vedio.css"/>
<script type="text/javascript" src="../js/vedio.js"></script>
</head>
<body>
	
	<section id="skin">
		<video id="myMovie" width="640" height="360">
			<source src="http://www.cnblogs.com/movie/1.mp4"></source>
		</video>
		
		<nav>
			<div id="buttons">
				<button type="button" id="playButton">Play</button>
			</div>
			<div id="defaultBar"> 
				<div id="progressBar"></div>	
			</div>
			<div style="clear:both">
			
			</div>
		</nav>
	</section>
</body>
</html>

       css代码：     

    每日一道理
“上下五千年，龙的看火不灭；古有愚公志，而今从头越…… ”站在新世纪的门槛上，我们的追求就是让祖国灿烂的喜悦飞扬在美好的明天……
@CHARSET "UTF-8";
body{
	text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
	display:block;
}
#skin{
	width:700px;
	margin:10px auto;
	padding:5px;
	background:red;
	border:4px solid black;
	border-radius:10px;
}
nav{
	margin:5px 0px;
}
#buttons{
	float:left;
	width:70px;
	height:22px;
}
#defaultBar{
	position:relative;
	float:left;
	width:600px;
	height:16px;
	padding:4px;
	border:2px solid black;
	background:yellow;
}
#progressBar{
	position:absolute;
	width:0px;
	height:16px;
	background:blue;
}

         Javascript代码：

function doFirst() {
	barSize=600;
	myMovie=document.getElementById("myMovie");
	playButton=document.getElementById("playButton");
	bar=document.getElementById("defaultBar");
	progeressBar=document.getElementById("progressBar");
	
	playButton.addEventListener("click", playOrPause, false);
	bar.addEventListener("click", clickedBar, false);
}

function playOrPause() {
	if (!myMovie.paused && !myMovie.ended) {
		myMovie.pause();
		playButton.innerHTML="Play";
		window.clearInterval(updateBar);
	} else {
		myMovie.play();
		playButton.innerHTML="Pause";
		updateBar=setInterval(update,500);
	}
}

function update() {
	if (!myMovie.ended) {
		var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);
		progressBar.style.width=size+'px';
	} else {
		progressBar.style.width='0px';
		playButton.innerHTML="Play";
		window.clearInterval(updateBar);
	}
}

function clickedBar(e) {
	if(!myMovie.paused && !myMovie.ended) {
		var mouseX = e.pageX-bar.offsetLeft;
		var newtime = mouseX*myMovie.duration/barSize;
		myMovie.currentTime = newtime;
		progressBar.style.width=mouseX+'px';
	}
}

window.addEventListener("load",doFirst,false);

       至于视频文件，可以自己去找几个做测试，只支撑ogg、mp4、mkv的。

文章结束给大家分享下程序员的一些笑话语录： 某程序员对书法十分感兴趣，退休后决定在这方面有所建树。花重金购买了上等的文房四宝。一日突生雅兴，一番磨墨拟纸，并点上了上好的檀香，颇有王羲之风 范，又具颜真卿气势，定神片刻，泼墨挥毫，郑重地写下一行字：hello world.

posted @ 2013-04-24 21:35  xinyuyuanm  阅读(305)  评论(0)    收藏  举报