之前用過video.js插件寫過視頻組件，但是自己一般僅僅是播放個視頻，裏面有好多功能用不到，改着不太方便，於是就自己用jQuery封裝了一個插件，控制器之類的樣式是可以自定義的，支持中英文切換，廢話不多說，下面上圖。
高版本瀏覽器video樣式
注：如果遇到進度條不能拖動的情況，不是兼容性問題，是webkit內核的瀏覽器在本地播放視頻設置video播放時間(video.currentTime)的時候會自動初始化爲0，一般放到服務器上是不會出現這個問題的，再具體的話可以網上查一查。
低版本瀏覽器使用object和embed （播放器是flvplayer.swf）
（object和embed詳細使用方法我之前有篇文章寫過點擊打開鏈接）
接下來是代碼 （demo下載鏈接）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Custom HTML5 Video Controls with jQuery</title>
<link rel="stylesheet" href="video/style.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="video/video.js" type="text/javascript"></script>
</head>
<body>
<div id="videoContainer" class="videoContainer">
<video loop preload="auto" poster="post.jpg">
<source src="ncr-video.mp4" type="video/mp4" />
<!--<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
<source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
<param name="movie" value="video/flvplayer.swf" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="vcastr_file=../ncr-video.mp4&LogoText=description&BufferTime=3&IsAutoPlay=1">
<embed src="video/flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=../ncr-video.mp4&IsAutoPlay=1&LogoUrl=post.jpg" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</video>
</div>
<script>
window.videoControl({
id:'#videoContainer', // 容器id
autoplay:false, // 是否自動播放
lang:'zh', // 語言 默認英文
title:'This is HTML5 video with custom controls', // 標題
options:{ // 控件
speed:true, // 速度控件
sound:true, // 聲音控件
light:false, // 開關燈控件
full:true // 全屏控件
}
});
</script>
</body>
</html>