基於jQuery的自定義Video視訊播放元件（相容IE6~8）

阿新 • • 發佈：2019-01-13

之前用過video.js外掛寫過視訊元件，但是自己一般僅僅是播放個視訊，裡面有好多功能用不到，改著不太方便，於是就自己用jQuery封裝了一個外掛，控制器之類的樣式是可以自定義的，支援中英文切換，廢話不多說，下面上圖。

高版本瀏覽器video樣式

注：如果遇到進度條不能拖動的情況，不是相容性問題，是webkit核心的瀏覽器在本地播放視訊設定video播放時間(video.currentTime)的時候會自動初始化為0，一般放到伺服器上是不會出現這個問題的，再具體的話可以網上查一查。

視訊編碼格式我是用的MP4的AVC(H264)

低版本瀏覽器使用object和embed （播放器是flvplayer.swf）

（object和embed詳細使用方法我之前有篇文章寫過點選開啟連結）

<!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>

具體外掛程式碼和demo請點選下載

基於jQuery的自定義Video視訊播放元件（相容IE6~8）

基於jQuery的自定義Video視訊播放元件（相容IE6~8）

Vue Quill Editor自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、段落等

自定義Android視訊播放器

細說 Angular 的自定義表單控制元件（贊，實用)

自定義一個分段控制元件（仿QQ頂部的分段控制元件）

iOS遠端推送自定義語音合成播放聲音（類似支付寶收款提醒）

Vue 自定義彈出框元件（類似淘寶選擇規格）

自定義時間選擇控制元件（仿ios滾動效果）

最簡單的基於libVLC的例子：最簡單的基於libVLC的視訊播放器（圖形介面版）

angular自定義表單控制元件（轉）

iOS開發UI篇—自定義瀑布流控制元件（蘑菇街資料重新整理操作）

TabTopAutoLayout【自定義頂部選項卡區域（帶下劃線）（動態選項卡數據且可滑動）】

自定義上傳控件（兼容IE8）

spring-AOP+自定義註解實現日誌管理（註解方式實現）

iOS自定義任意解析度的Camera（包含example code）

開發懸浮球SDK之自定義view 下篇 — 裁剪圓形（以及其他形狀）背景圖片並設定文字

自定義視覺化除錯工具（Microsoft.VisualStudio.DebuggerVisualizers）

javascript--自定義彈出登陸視窗（彈出窗）

最簡單的基於DirectShow的示例：視訊播放器自定義版

自定義video的controls（播放暫停按鈕、進度條、快進快退等）

基於jQuery的自定義Video視訊播放元件（相容IE6~8）

相關推薦