HTML5+CSS3+jQuery製作視訊播放器完全指南
播放器最終效果預覽圖
1.下載MediaElement.js
首先下載MediaElement.js指令碼檔案,這是一個開源的HTML5音、視訊外掛,解壓後你會得到3個檔案—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ,分別是使用Flash、 JavaScript和 SilverLight實現視訊播放,並且新建一個"js"資料夾並把它們放進去(當然本例中並不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 兩個檔案,可以刪去。)。
2.HTML標記
首先需要連結(link)一個jQuery庫,這裡使用的是Google託管的jQuery庫。然後我們在連結"mediaelement-and-player.min.js"檔案和CSS檔案。
- <head>
- <title>Video Player</title>
- <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <scriptsrc="js/mediaelement-and-player.min.js"
- <linkrel="stylesheet"href="css/style.css"media="screen">
- </head>
當然我們還需要新增一個Html5 video標記來建立一個視訊播放器,再新增一些屬性將它初始化。(注:poster是指視訊的預覽圖)
- <videowidth="640"height="267"poster="media/cars.png">
- <sourcesrc="media/cars.mp4"type="video/mp4">
- </video>
接下來我們再加入下面的程式碼來建立控制面板,需要新增的控制器或功能有:
- alwaysShowControls – "true"則設定video控制面板永遠顯示,"false"則在滑鼠移走後隱藏。
- videoVolume – "horizontal"設定音量滑動控制器為水平
- 其它功能:暫停播放、前進播放、聲音和全屏
- <scripttype="text/javascript">// <![CDATA[
- $(document).ready(function() {
- $('video').mediaelementplayer({
- alwaysShowControls: true,
- videoVolume: 'horizontal',
- features: ['playpause','progress','volume','fullscreen']
- });
- });
- // ]]></script>
更多設定請查閱MediaElement.js的設定文件。
3.播放器基本樣式設計
先修改一下樣式設定:
- .mejs-inner,
- .mejs-inner div,
- .mejs-inner a,
- .mejs-inner span,
- .mejs-inner button,
- .mejs-inner img {
- margin: 0;
- padding: 0;
- border: none;
- outline: none;
- }
再給video Container新增樣式,下面的程式碼全部都是用來控制佈局的,沒有對播放器樣式做任何修改。
- .mejs-container {
- position: relative;
- background: #000000;
- }
- .mejs-inner {
- position: relative;
- width: inherit;
- height: inherit;
- }
- .me-plugin { position: absolute; }
- .mejs-container-fullscreen .mejs-mediaelement,
- .mejs-container-fullscreen video,
- .mejs-embed,
- .mejs-embed body,
- .mejs-mediaelement {
- width: 100%;
- height: 100%;
- }
- .mejs-embed,
- .mejs-embed body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- }
- .mejs-container-fullscreen {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: 1000;
- }
- .mejs-background,
- .mejs-mediaelement,
- .mejs-poster,
- .mejs-overlay {
- position: absolute;
- top: 0;
- left: 0;
- }
- .mejs-poster img { display: block; }
4.控制面板樣式設定
讓我們先從新增“播放按鈕”開始:
- .mejs-overlay-play { cursor: pointer; }
- .mejs-inner .mejs-overlay-button {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 50px;
- height: 50px;
- margin: -25px0 0-25px;
- background: url(../img/play.png) no-repeat;
- }
接下來再新增視訊控制器佈局:將它放在視訊底部,高度為34px,再新增一個背景顏色,配合RGBA來設定透明度。最後給按鈕新增基本樣式和圖元。
- .mejs-container .mejs-controls {
- position: absolute;
- width: 100%;
- height: 34px;
- left: 0;
- bottom: 0;
- background: rgb(0,0,0);
- background: rgba(0,0,0, .7);
- }
- .mejs-controls .mejs-button button {
- display: block;
- cursor: pointer;
- width: 16px;
- height: 16px;
- background: transparenturl(../img/controls.png);
- }
5.視訊控制器
這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制面板上,之後再對它們的寬度、位置和背景圖片做詳細的調整。
- .mejs-controls div.mejs-playpause-button {
- position: absolute;
- top: 12px;
- left: 15px;
- }
- .mejs-controls .mejs-play button,
- .mejs-controls .mejs-pause button {
- width: 12px;
- height: 12px;
- background-position: 0 0;
- }
- .mejs-controls .mejs-pause button { background-position: 0-12px; }
- .mejs-controls div.mejs-volume-button {
- position: absolute;
- top: 12px;
- left: 45px;
- }
- .mejs-controls .mejs-mute button,
- .mejs-controls .mejs-unmute button {
- width: 14px;
- height: 12px;
- background-position: -12px0;
- }
- .mejs-controls .mejs-unmute button { background-position: -12px-12px; }
- .mejs-controls div.mejs-fullscreen-button {
- position: absolute;
- top: 7px;
- right: 7px;
- }
- .mejs-controls .mejs-fullscreen-button button,
- .mejs-controls .mejs-unfullscreen button {
- width: 27px;
- height: 22px;
- background-position: -26px0;
- }
- .mejs-controls .mejs-unfullscreen button { background-position: -26px-22px; }
6.音量滑動控制器
音量滑動控制器的設定也一樣,設定好位置和大小,再新增一個圓角效果就可以了。
- .mejs-controls div.mejs-horizontal-volume-slider {
- position: absolute;
- cursor: pointer;
- top: 15px;
- left: 65px;
- }
- .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
- width: 60px;
- background: #d6d6d6;
- }
- .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
- position: absolute;
- width: 0;
- top: 0;
- left: 0;
- }
- .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
- .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
- height: 4px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- }
7.進度條
進度條的設定也同樣簡單,將它緊貼在控制面板上方就可以了,之後就是設定不同狀態(all和loaded狀態)的背景顏色。現在將它初始化為零就可以在影片播放時自動改變了。(但是你看不出來。)
- .mejs-controls div.mejs-time-rail {
- position: absolute;
- width: 100%;
- left: 0;
- top: -10px;
- }
- .mejs-controls .mejs-time-rail span {
- position: absolute;
- display: block;
- cursor: pointer;
- width: 100%;
- height: 10px;
- top: 0;
- left: 0;
- }
- .mejs-controls .mejs-time-rail .mejs-time-total {
- background: rgb(152,152,152);
- background: rgba(152,152,152, .5);
- }
- .mejs-controls .mejs-time-rail .mejs-time-loaded {
- background: rgb(0,0,0);
- background: rgba(0,0,0, .
相關推薦
HTML5+CSS3+jQuery製作視訊播放器完全指南
播放器最終效果預覽圖 1.下載MediaElement.js 首先下載MediaElement.js指令碼檔案,這是一個開源的HTML5音、視訊外掛,解壓後你會得到3個檔案—— "flashmediaelement.swf"、 "mediaelement-and
二種常用的製作視訊播放器的方法
一、利用SeekBar + SurfaceView 來實現一個視訊播放器 <SeekBar android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_co
使用ffmpeg製作視訊播放器(分享原始碼)
使用ffmpeg製作c++視訊播放器(分享原始碼) 專案地址: 點選開啟連結,歡迎pr。 本專案採用ffmpeg解碼視訊檔案,使用多執行緒處理解碼等操作,是學習多執行緒的不錯的機會,在這個專案開發過程中鞏固了不少多執行緒的知識,視訊的處理主要是ffmpeg,音訊採
HTML5+CSS3+JQuery打造自定義視訊播放器
簡介 HTML5的<video>標籤已經被目前大多數主流瀏覽器所支援,包括還未正式釋出的IE9也宣告將支援<video>標籤,利用瀏覽器原生特性嵌入視訊有很多好處,所以很多開發者想盡快用上,但是真正使用前還有些問題要考慮,尤其是 Opera/Fir
第二十四篇-用VideoView製作一個簡單的視訊播放器
這是一個播放本地視訊的播放器,videoUrl1是手機裡放置視訊的路徑 效果圖: MainActivity.java package com.example.aimee.videotest; import android.Manifest; import android.co
自己動手實現html5視訊播放器倍數播放功能
自己動手實現html5視訊播放器倍數播放功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿酷TONY--Tangni&
HTML5倍數功能視訊播放器(加速2倍,1.5倍播放)
方式一:採用第三方雲視訊平臺 HTML5倍數功能視訊播放器(加速2倍,1.5倍播放) 倍數功能視訊播放器的應用: 培訓場景,教育教學場景下,可以倍速觀看視訊,比如1.5倍,2倍的速度觀看視訊,可以更快速的看完課程,節省時間。 <div id="player">&
FFmpeg + SDL的視訊播放器的製作(6)
FFmpeg + SDL的視訊播放器的製作(6) FFmpeg和SDL的整合實現視訊播放 脫離開發環境的獨立播放器 /** * 最簡單的基於FFmpeg的視訊播放器2(SDL升級版) * Simplest FFmpeg Player 2(SDL Update) *
FFmpeg + SDL的視訊播放器的製作(5)
FFmpeg + SDL的視訊播放器的製作(5) SDL函式 進階練習 視窗可以移動 視窗可以調整大小 /** * 最簡單的SDL2播放視訊的例子(SDL2播放RGB/YUV) * Simplest Video Play SDL2 (SDL
FFmpeg + SDL的視訊播放器的製作(4)
FFmpeg + SDL的視訊播放器的製作(4) SDL的函式和資料結構 二倍速度 二倍寬度 視窗大小固定為500X500 視訊周圍包圍10畫素的“黑框” 換一段測試YUV素材進行播放 示例程式: /** * 最簡單的SDL2播放
FFmpeg + SDL的視訊播放器的製作(3)
FFmpeg + SDL的視訊播放器的製作(3) ffmpeg解碼的函式和資料結構 例項程式執行:simplest_ffmpeg_decoder.cpp /** * 最簡單的基於FFmpeg的解碼器 * Simplest FFmpeg Decoder
FFmpeg + SDL的視訊播放器的製作(1)
FFmpeg + SDL的視訊播放器的製作(1) FFmpeg:視音訊解碼 SDL:視訊顯示 合起來就是播放器。 封裝格式:MP4,RMVB,TS,FLV,AVI 視訊編碼資料:H.264,MPEG2,VC-1 音訊編碼資
jquery實現--自定義視訊播放器
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
jqm視訊播放器,html5視訊播放器,html5音樂播放器,html5播放器,video開發demo,html5視訊播放示例,html5手機視訊播放器
最近在論壇中看到了很多實用html5開發視訊播放,音樂播放的功能,大部分都在尋找答案。因此我就在這裡做一個demo,供大家相互學習。html5開發越來越流行了,而對於視訊這一塊也是必不可少的一部分。如何
HTML5的視訊播放器videojs
html5的標準還沒有最終確定,但關於視訊播放器的標準基本上被卡住了。mazilla和Opera由於沒有H264的版權,堅持不支援H264標準的mp4格式視訊,只支援ogg和webm兩種格式,其中webm是谷歌去年提供的一個新的標準,並將該格式開源;ogg似乎是早期的一種手機視訊的格式,
《基於 FFmpeg + SDL 的視訊播放器的製作》課程的視訊
這兩天開始帶廣播電視工程大二的暑假小學期的課程設計了。本次小學期課程內容為《基於 FFmpeg + SDL 的視訊播放器的製作》,其中主要講述了視音訊開發的入門知識。由於感覺本課程的內容不但適合本科生,而且也比較適合無視音訊基礎的開發者入門使用,所以在講課的同時也錄製了一部分
[轉載]分享10款最棒的免費HTML5視訊播放器
最近Web圈子裡最讓人激動地莫過於HTML5了,特別是HTML5視訊,使用HTML5視訊標籤可以幫助我們解決困擾我們很長時間的網站視訊插入問題。 HTML5可以在沒有flash的情況下播放視訊。現在有很多的漂亮HTML5視訊播放介面,包括控制元素,所以你不需要其它的東
基於tkinter+python36製作得視訊播放器,非會員也可播放
首先附上2個播放地址,可以解析視訊網站,我只是個視訊搬運工,暫時未新增下載功能。 www.wq114.org/weixin.php?url= http://www.wmxz.wang/video.php?url= 兩個網站都可快速解析出視訊播放地址 上圖 t
Java實現視訊網站的視訊上傳、視訊轉碼、視訊關鍵幀抽圖, 及視訊播放功能 視訊網站中提供的線上視訊播放功能,播放的都是FLV格式的檔案,它是Flash動畫檔案,可通過Flash製作的播放器來播
package com.webapp.service; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.Serv
基於HTML5的視訊播放器
之前在上網去搜索播放器的時候,很多都要收費的,不收費的感覺看起來很費勁,所以自己簡單些了一下,前幾天有共享過一個簡單的H5視訊播放器,但是存在一些BUG,最近修復了一下,再次共享,提供給一些H5和CSS3學習的朋友學習一下。 擁有播放器正常功能:單擊播放暫停,雙擊全