映像（mp4)とそのサムネイルを作っておき、サムネイルをクリック時に映像を再生する。
サムネイル、mp4、タイトルはxmlファイルで定義する。xmlファイルは次のとおり。

<?xml version="1.0" encoding="Shift_JIS"?>
<root>
   <customer>
      <title>ビッグバン</title>  タイトル
      <thmb>bigbang.jpg</thmb>  サムネイル
      <name>bigbang.mp4</name>  mp4
   </customer>
   <customer>
      <title>木星の誕生</title>
      <thmb>jupiter.jpg</thmb>
      <name>jupiter.mp4</name>
   </customer>
   <customer>
      <title>シャボン玉</title>
      <thmb>sabao.jpg</thmb>
      <name>sabao.mp4</name>
   </customer>
   <customer>
      <title>オーロラ</title>
      <thmb>aurora.jpg</thmb>
      <name>aurora.mp4</name>
   </customer>
   <customer>
      <title>尾瀬ヶ原　咲き乱れる日光きすげ</title>
      <thmb>ozegahara.jpg</thmb>
      <name>ozegahara.mp4</name>
   </customer>
   <customer>
      <title>30000本のひまわり畑</title>
      <thmb>sunflower.jpg</thmb>
      <name>sunflower.mp4</name>
   </customer>
</root>

xmlファイルを読み込み、サムネイルを表示するソースコードは次のとおり。

<?php
$limX = 120;
$limY = 120;
$thmb_box_width = $limX + 2. 'px';
//ディレクトリ名
$dir_path = "../img/test/";
if ($fileContents = file_get_contents('filedef.xml')):
  $xml = new SimpleXMLElement($fileContents);
  $maxCustomer = count($xml->customer);
  $count = 0;
  $loop = 0;
  while ($loop < $maxCustomer):
     $title = $xml->customer[$loop]->title;
     $thmb = $xml->customer[$loop]->thmb;
     $thmb_file = $dir_path.$thmb;
     $name = $xml->customer[$loop]->name;
     $video_file = $dir_path.$name;
     ++$loop;
     if(is_file($thmb_file) && is_file($video_file)):
       if (@getimagesize($thmb_file)):
          $iarray = getimagesize($thmb_file);
          $sx = $iarray[0];
          $sy = $iarray[1];
          $width = $limX;
          $bairitu = $limX / $sx;
          $height = $sy * $bairitu;
          $url = urlencode(mb_convert_encoding($video_file, "UTF-8")); 
          $url_title = urlencode(mb_convert_encoding($title, "UTF-8")); 
          if($count!=0 && $count%4==0) :
             echo '<BR>';
          endif; 
       $count++; ?>
       <div style="width:<?= $thmb_box_width ?>;float:left;margin:6px"> 
       <a href ="video.php?path=<?= $url ?>&title=<?= $url_title ?>" target = "_blank">
       <img src = "<?= $thmb_file ?>" width="<?= $width ?>" height="<?= $height ?>"><figcaption style="font-size:80%;text-align:center;"><?= $title ?></figcaption></a></div>
<?php
       endif;
     endif;
  endwhile;
endif;
?>

mp4を再生するvideo.phpのソースコード

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> 
<![endif]-->
<?php
if(!empty($_GET['path'])):
  $file_name = $_GET['path'];
  $title = $_GET['title'];
?>
  <h1><?php echo $title; ?></h1>
  <video controls width="600" height="500" autoplay>
  <source src="<?= $file_name ?>" type="video/mp4"> 
  </video>
<?php endif; ?>

サンプル