2. 程式人生 > >HTML5+CSS3+jQuery製作視訊播放器完全指南

HTML5+CSS3+jQuery製作視訊播放器完全指南

阿新 • • 發佈：2019-02-04

播放器最終效果預覽圖

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檔案。

  1. <head>
  2.     <title>Video Player</title>
  3.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4.     <scriptsrc="js/mediaelement-and-player.min.js"
    ></script>
  5.     <linkrel="stylesheet"href="css/style.css"media="screen">
  6. </head>

當然我們還需要新增一個Html5 video標記來建立一個視訊播放器，再新增一些屬性將它初始化。（注：poster是指視訊的預覽圖）

  1. <videowidth="640"height="267"poster="media/cars.png">
  2.     <sourcesrc="media/cars.mp4"type="video/mp4">
  3. </video>

接下來我們再加入下面的程式碼來建立控制面板，需要新增的控制器或功能有：

  • alwaysShowControls – "true"則設定video控制面板永遠顯示，"false"則在滑鼠移走後隱藏。
  • videoVolume – "horizontal"設定音量滑動控制器為水平
  • 其它功能：暫停播放、前進播放、聲音和全屏
    1. <scripttype="text/javascript">// <![CDATA[ 
    2. $(document).ready(function() { 
    3.     $('video').mediaelementplayer({ 
    4.         alwaysShowControls: true, 
    5.         videoVolume: 'horizontal', 
    6.         features: ['playpause','progress','volume','fullscreen'] 
    7.     }); 
    8. }); 
    9. // ]]></script>

更多設定請查閱MediaElement.js的設定文件。

3.播放器基本樣式設計

先修改一下樣式設定：

  1. .mejs-inner, 
  2. .mejs-inner div, 
  3. .mejs-inner a, 
  4. .mejs-inner span, 
  5. .mejs-inner button, 
  6. .mejs-inner img { 
  7.     margin: 0; 
  8.     padding: 0; 
  9.     border: none; 
  10.     outline: none; 
  11. } 

再給video Container新增樣式，下面的程式碼全部都是用來控制佈局的，沒有對播放器樣式做任何修改。

  1. .mejs-container { 
  2.     position: relative; 
  3.     background: #000000; 
  4. } 
  5. .mejs-inner { 
  6.     position: relative; 
  7.     width: inherit; 
  8.     height: inherit; 
  9. } 
  10. .me-plugin { position: absolute; } 
  11. .mejs-container-fullscreen .mejs-mediaelement, 
  12. .mejs-container-fullscreen video, 
  13. .mejs-embed, 
  14. .mejs-embed body, 
  15. .mejs-mediaelement { 
  16.     width: 100%; 
  17.     height: 100%; 
  18. } 
  19. .mejs-embed, 
  20. .mejs-embed body { 
  21.     margin: 0; 
  22.     padding: 0; 
  23.     overflow: hidden; 
  24. } 
  25. .mejs-container-fullscreen { 
  26.     position: fixed; 
  27.     left: 0; 
  28.     top: 0; 
  29.     right: 0; 
  30.     bottom: 0; 
  31.     overflow: hidden; 
  32.     z-index: 1000; 
  33. } 
  34. .mejs-background, 
  35. .mejs-mediaelement, 
  36. .mejs-poster, 
  37. .mejs-overlay { 
  38.     position: absolute; 
  39.     top: 0; 
  40.     left: 0; 
  41. } 
  42. .mejs-poster img { display: block; } 

4.控制面板樣式設定

讓我們先從新增“播放按鈕”開始：

  1. .mejs-overlay-play { cursor: pointer; } 
  2. .mejs-inner .mejs-overlay-button { 
  3.     position: absolute; 
  4.     top: 50%; 
  5.     left: 50%; 
  6.     width: 50px; 
  7.     height: 50px; 
  8.     margin: -25px0 0-25px; 
  9.     background: url(../img/play.png) no-repeat; 
  10. } 

接下來再新增視訊控制器佈局：將它放在視訊底部，高度為34px，再新增一個背景顏色，配合RGBA來設定透明度。最後給按鈕新增基本樣式和圖元。

  1. .mejs-container .mejs-controls { 
  2.     position: absolute; 
  3.     width: 100%; 
  4.     height: 34px; 
  5.     left: 0; 
  6.     bottom: 0; 
  7.     background: rgb(0,0,0); 
  8.     background: rgba(0,0,0, .7); 
  9. } 
  10. .mejs-controls .mejs-button button { 
  11.     display: block; 
  12.     cursor: pointer; 
  13.     width: 16px; 
  14.     height: 16px; 
  15.     background: transparenturl(../img/controls.png); 
  16. } 

5.視訊控制器

這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制面板上，之後再對它們的寬度、位置和背景圖片做詳細的調整。

  1. .mejs-controls div.mejs-playpause-button { 
  2.     position: absolute; 
  3.     top: 12px; 
  4.     left: 15px; 
  5. } 
  6. .mejs-controls .mejs-play button, 
  7. .mejs-controls .mejs-pause button { 
  8.     width: 12px; 
  9.     height: 12px; 
  10.     background-position: 0 0; 
  11. } 
  12. .mejs-controls .mejs-pause button { background-position: 0-12px; } 
  13. .mejs-controls div.mejs-volume-button { 
  14.     position: absolute; 
  15.     top: 12px; 
  16.     left: 45px; 
  17. } 
  18. .mejs-controls .mejs-mute button, 
  19. .mejs-controls .mejs-unmute button { 
  20.     width: 14px; 
  21.     height: 12px; 
  22.     background-position: -12px0; 
  23. } 
  24. .mejs-controls .mejs-unmute button { background-position: -12px-12px; } 
  25. .mejs-controls div.mejs-fullscreen-button { 
  26.     position: absolute; 
  27.     top: 7px; 
  28.     right: 7px; 
  29. } 
  30. .mejs-controls .mejs-fullscreen-button button, 
  31. .mejs-controls .mejs-unfullscreen button { 
  32.     width: 27px; 
  33.     height: 22px; 
  34.     background-position: -26px0; 
  35. } 
  36. .mejs-controls .mejs-unfullscreen button { background-position: -26px-22px; } 

6.音量滑動控制器

音量滑動控制器的設定也一樣，設定好位置和大小，再新增一個圓角效果就可以了。

  1. .mejs-controls div.mejs-horizontal-volume-slider { 
  2.     position: absolute; 
  3.     cursor: pointer; 
  4.     top: 15px; 
  5.     left: 65px; 
  6. } 
  7. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
  8.     width: 60px; 
  9.     background: #d6d6d6; 
  10. } 
  11. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  12.     position: absolute; 
  13.     width: 0; 
  14.     top: 0; 
  15.     left: 0; 
  16. } 
  17. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
  18. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  19.     height: 4px; 
  20.     -webkit-border-radius: 2px; 
  21.     -moz-border-radius: 2px; 
  22.     border-radius: 2px; 
  23. } 

7.進度條

進度條的設定也同樣簡單，將它緊貼在控制面板上方就可以了，之後就是設定不同狀態（all和loaded狀態）的背景顏色。現在將它初始化為零就可以在影片播放時自動改變了。（但是你看不出來。）

  1. .mejs-controls div.mejs-time-rail { 
  2.     position: absolute; 
  3.     width: 100%; 
  4.     left: 0; 
  5.     top: -10px; 
  6. } 
  7. .mejs-controls .mejs-time-rail span { 
  8.     position: absolute; 
  9.     display: block; 
  10.     cursor: pointer; 
  11.     width: 100%; 
  12.     height: 10px; 
  13.     top: 0; 
  14.     left: 0; 
  15. } 
  16. .mejs-controls .mejs-time-rail .mejs-time-total { 
  17.     background: rgb(152,152,152); 
  18.     background: rgba(152,152,152, .5); 
  19. } 
  20. .mejs-controls .mejs-time-rail .mejs-time-loaded { 
  21.     background: rgb(0,0,0); 
  22.     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學習的朋友學習一下。 擁有播放器正常功能：單擊播放暫停，雙擊全