基於jQuery的自定義Video視訊播放元件(相容IE6~8)
之前用過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)
之前用過video.js外掛寫過視訊元件,但是自己一般僅僅是播放個視訊,裡面有好多功能用不到,改著不太方便,於是就自己用jQuery封裝了一個外掛,控制器之類的樣式是可以自定義的,支援中英文切換,廢話不多說,下面上圖。 高版本瀏覽器video樣式 注:如果遇到進度
Vue Quill Editor自定義圖片/視訊上傳(Element UI + OSS)、字型、字型大小、段落等
近期專案中需要使用富文字編輯器,開始想到的富文字編輯器是百度的UEditor,UEditor功能齊全、外掛多,但是圖片只能上傳到本地伺服器,如果需要上傳到其他伺服器需要改動原始碼,而且是PHP、JSP、ASP、.Net版本,同時UEditor體積過大壓縮包有
自定義Android視訊播放器
Android開發視訊播放器,一般都是使用MediaPlayer+SurfaceView來實現,VideoView也是使用了MediaPlayer+SurfaceView方式(不信看原始碼)。所以,我打算使用MediaPlayer+SurfaceView封裝自己
細說 Angular 的自定義表單控制元件 (贊,實用)
我們在構建企業級應用時,通常會遇到各種各樣的定製化功能,因為每個企業都有自己獨特的流程、思維方式和行為習慣。有很多時候,軟體企業是不太理解這種情況,習慣性的會給出一個診斷,『你這麼做不對,按邏輯應該這樣這樣』。但企業往往不會接受這種說法,習慣的力量是強大的,我們一定要尊重
自定義一個分段控制元件(仿QQ頂部的分段控制元件)
在Android當中並沒有分段控制元件,怎樣去實現一個這樣的分段控制元件,那就要自己去自定義了; 先看一張效果圖: 整體的思路: 1. 設定分段控制元件背景資源 2. 自定義segmentView繼承LinearLayout 3. 設定分段控制元件的屬性(文字的顏色、文
iOS遠端推送自定義語音合成播放聲音(類似支付寶收款提醒)
本文參考文章 iOS 模仿支付寶支付到賬推送,播報錢數,看上面寫的一些不是很詳細遇到了許多問題,這裡特意自己總結了一下。將我遇到的問題以及解決方案給羅列出來供大家參考。首先建立一個工程:開啟推送通知註冊接受Background Modes內部的第一個我看有的demo是有夠選的
Vue 自定義彈出框元件(類似淘寶選擇規格)
底部選擇 實現效果 1.彈出效果新增動畫 2.直接呼叫元件,呼叫方法為: <select-rules ref="colorSelect" :price="price" :mainPic="mianUrl" @getCartNum="getC
自定義時間選擇控制元件(仿ios滾動效果)
1.先上自定義的控制元件: /** * 滾輪選擇器 * author LH * data 2016/8/20 17:26 */ public class WheelView extends View { public static final String
最簡單的基於libVLC的例子:最簡單的基於libVLC的視訊播放器(圖形介面版)
=====================================================最簡單的基於libVLC的例子文章列表:=====================================================本文記錄使用libVLC
angular自定義表單控制元件(轉)
當我們打算自定義表單控制元件前,我們應該先考慮一下以下問題:是否已經有相同語義的 native (本機) 元素?如:<input type="number">如果有,我們就應該考慮能否依賴該元素,僅使用 CSS 或漸進增強的方式來改變其外觀/行為就能滿足我們
iOS開發UI篇—自定義瀑布流控制元件(蘑菇街資料重新整理操作)
1 // 2 // YYWaterflowView.m 3 // 06-瀑布流 4 // 5 // Created by apple on 14-7-29. 6 // Copyright (c) 2014年 wendingding. All rights reserved.
TabTopAutoLayout【自定義頂部選項卡區域(帶下劃線)(動態選項卡數據且可滑動)】
註意事項 ecif margin 代碼分析 獨立 xml文件 回收 support mtab 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 前言 自定義頂部選項卡布局LinearLayout類,實現帶下劃線且可滑動效果。【實際情況中建議使用RecyclerVie
自定義上傳控件(兼容IE8)
lin 不同 而且 int 代碼 NPU 自定義 HA 過程 上傳控件是 <input type="file"/> 而實際開發過程中,都會自定義一個控件,因為這個控件本身難看,而且不同瀏覽器效果不一樣。 如IE8顯示如下: 谷歌瀏覽器顯示是這
spring-AOP+自定義註解實現日誌管理(註解方式實現)
一、場景 後臺管理系統中,管理員作業系統時生成日誌儲存在資料庫中。 二、實現 1、jar包依賴 <!-- https://mvnrepository.com/artifact/org.springframework/spring-aop --> <dependency&
iOS自定義任意解析度的Camera(包含example code)
說在前面 如果不想看文章,可以直接翻到最後,我已經把程式碼上傳到gist上,但這樣你會失去一個理解程式碼的機會。 概述 該文章會涉及到的概念包括: AVCaptureDeviceInput,AVCaptureVideoDataOutput,AVCaptureV
開發懸浮球SDK之自定義view 下篇 — 裁剪圓形(以及其他形狀)背景圖片並設定文字
本文主要是講自定義view中剪下圓形背景圖並設定文字的實現過程和其中遇到的問題及相關技術介紹。是應領導要求在上一懸浮球介面(水波紋效果:點選開啟連結)之後更改的圓形背景圖: 剪下後 -> 起初只是簡單的背景圖片,但用於沒有美工,自己學習P
自定義視覺化除錯工具(Microsoft.VisualStudio.DebuggerVisualizers)
前言: 最近飛機失聯的太多,明天要飛北京處理伺服器雙機熱備的問題,航空保險已買,單號是:TF10122913。 至於我的銀行卡密碼,在我枕頭下面的字條裡,要是我之後沒再更新文章,請通知我家人,哈哈哈哈。好了,Joke 被 Play 後,下面 Enter 正文。 背景:話說:使用CYQ.Data時,會經常斷點M
javascript--自定義彈出登陸視窗(彈出窗)
web開發中瀏覽器物件封裝了諸如prompt、alert、confirm等彈出框,但是有的彈出框並不能滿足開發需要,需要我們自己定義彈出框,諸如使用者登陸框、訊息提示框等。本文利用彈出使用者登陸框示例,對這部分知識做個小結。 示例需求:點選按鈕,彈出登陸視窗,且該視窗可以拖拽,彈出視窗的同時,整個頁面變成灰
最簡單的基於DirectShow的示例:視訊播放器自定義版
=====================================================最簡單的基於DirectShow的示例文章列表:=====================================================本文記錄一個簡單
自定義video的controls(播放暫停按鈕、進度條、快進快退等)
視訊標籤<video></video>是H5中新增的標籤,它自帶播放按鈕等控制元件,但在實際開發中我們是不會用標籤中自帶的控制元件屬性的,一般我們都會自定義控制元件。 首先我們來看看視訊標籤自帶的控制元件效果: 雖然總體來說,這些控制元件都有,但是往往我們