简洁HTML5视频播放器UI特效

<script src="path/to/modernizr.min.js"></script>

<link rel="stylesheet" href="path/to/font-awesome.min.css">

<link rel="stylesheet" href="path/to/style.css">

<script src="path/to/jquery.min.js"></script>

<script src="path/to/jqueryui.min.js"></script>

<script src="path/to/vedio.js"></script>

<div class="wrapper">

  <div class="js-video">

        <video class="js-media" poster="vedio/sintel.jpg">

            <source src="vedio/sintel.mp4" type="video/mp4" />

            <p>你的浏览器不支持 HTML5 Video。</p>

        </video>

        <i data-playPause class="playPause fa fa-play ui-icon"><span></span></i>

        <div class="ui">

          <div>

            <div data-progress class="progress">

              <div data-buffer class="progress-buffer"></div>

              <div data-time class="progress-time"></div>

            </div><!-- progress -->

          </div>

          <div>

            <span class="timeDisplay"><i data-currentTime>0:00</i> / <i data-duration>0:00</i></span>

          </div>

          <div>

            <i data-mute class="fa fa-volume-up ui-icon"></i>

          </div>

          <div>

            <div data-volume="100" class="volumeControl"><span class="ui-slider-handle"></span></div>

          </div>

        </div><!-- ui -->

        <i data-fullscreen class="fullscreen iconicfill-fullscreen" title="fullscreen"></i>

  </div><!-- js-video -->

</div><!-- wrapper -->