我正在开发一个视频网站。在页面中应该有一个播放器和许多链接或图片框来选择不同的视频。如果网络用户选择一个链接，则所选视频应在视频播放器上播放。我已经开发了播放器，现在我可以通过硬编码来播放视频。我如何捕捉用户选择并将正确的选择加载到播放器。我可以使用 html 5 还是我需要任何 java 脚本。
这是我的网页 -
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Caprice</title>
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" media="screen" href="style/css/prettyPhoto.css" />
<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="style/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="style/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="style/js/carousel.js"></script>
<script type="text/javascript" src="style/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="style/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Sidebar -->
<div id="sidebar">
<div id="logo"><a href="home.html"><img src="style/images/logo.png" alt="Caprice" /></a></div>
<!-- Begin Menu -->
<div id="menu" class="menu-v">
<ul>
<li><a href="home.html" >Home</a></li>
<li><a href="#" class="active">Video Tutorials</a>
<ul>
<li><a href="alVideo.html" class="active">Advance Level (A/L)</a></li>
</ul>
</li>
<li><a href="#">Downloads</a>
<ul>
<li><a href="alDownloads.html">Advance Level (A/L)</a></li>
</ul>
</li>
<li><a href="buttons-boxes-images.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- End Menu -->
<div class="sidebox">
<ul class="share">
<li><a href="#"><img src="style/images/icon-rss.png" alt="RSS" /></a></li>
<li><a href="#"><img src="style/images/icon-facebook.png" alt="Facebook" /></a></li>
<li><a href="#"><img src="style/images/icon-twitter.png" alt="Twitter" /></a></li>
<li><a href="#"><img src="style/images/icon-dribbble.png" alt="Dribbble" /></a></li>
<li><a href="#"><img src="style/images/icon-linkedin.png" alt="LinkedIn" /></a></li>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Begin Content -->
<div id="content">
<h1 class="title">IT</h1>
<div class="line"></div>
<div class="intro">add content here...</div>
<!-- Begin Portfolio -->
<div id="portfolio">
<!-- <ul id="filtering-nav">
<li class="show">Filter:</li>
<li><a class="all" href="#all">All</a></li>
<li><a class="web" href="#web">Web</a></li>
<li><a class="photo" href="#photo">Photo</a></li>
<li><a class="video" href="#video">Video</a></li>
</ul>-->
<div class="line"></div>
<div id="breadcrumb">
<ul>
<li class="first">You Are Here</li>
<li>»</li>
<li>Video Tutorials</li>
<li>»</li>
<li><a href="alVideo.html">Advance Level (A/L)</a></li>
<li>»</li>
<li><a href="alVideoScience.html">Science Stream</a></li>
<li>»</li>
<li class="current"><a href="alVideoScienceIt.html">IT</a></li>
<li>»</li>
</ul>
</div>
<div class="line"></div>
<div class="clear"></div>
<div class="items">
<div class="box col4 video">
<div class="image">
<a title="Caption"><span class="overlay play"></span><img src="style/images/art/p2.jpg" alt=""/></a>
</div>
<h4><a href="">Introduction</a></h4>
<p>Add content here....</p>
</div>
<div class="box col4 photo">
<div class="image">
<a title="Caption"><span class="overlay play"></span><img src="style/images/art/p2.jpg" alt="" /></a>
</div>
<h4><a href="">Malesuada Magna</a></h4>
<p>Add content here....</p>
</div>
</div>
<center>
<form>
<video width="400" height="300" controls data-setup="{}">
<source src="videos/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="videos/video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>
</form>
</center>
<!-- .wrap -->
</div>
<!-- End Portfolio -->
<!-- Begin Footer -->
<div id="footer">
<div class="footer-box one-third">
<h3>Popular Posts</h3>
<ul class="popular-posts">
<li>
<a href="#"><img src="style/images/art/s1.jpg" alt="" /></a>
<h5><a href="#">Dolor Commodo Consectetur</a></h5>
<span>26 Aug 2011 | <a href="#">21 Comments</a></span>
</li>
<li>
<a href="#"><img src="style/images/art/s2.jpg" alt="" /></a>
<h5><a href="#">Dolor Commodo Consectetur</a></h5>
<span>26 Aug 2011 | <a href="#">21 Comments</a></span>
</li>
<li>
<a href="#"><img src="style/images/art/s3.jpg" alt="" /></a>
<h5><a href="#">Dolor Commodo Consectetur</a></h5>
<span>26 Aug 2011 | <a href="#">21 Comments</a></span>
</li>
</ul>
</div>
<div class="footer-box one-third">
<h3>About</h3>
<p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Lorem Ipsum Dolor Sit
Moon Avenue No:11/21
Planet City, Earth<br>
<br>
<span class="lite1">Fax:</span> +555 797 534 01<br>
<span class="lite1">Tel:</span> +555 636 646 62<br>
<span class="lite1">E-mail:</span> name@domain.com</p>
</div>
<div class="footer-box one-third last">
<h3>Custom Text</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit. </p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Content-->
</div>
<!-- End Wrapper -->
<div class="clear"></div>
<script type="text/javascript" src="style/js/scripts.js"></script>
<!--[if !IE]> -->
<script type="text/javascript" src="style/js/jquery.corner.js"></script>
<!-- <![endif]-->
</body>
</html>