基於HTML5自定義媒體播放器

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

簡要說明

顯示播放時間、可操控進度條，播放視訊是通過拖拽媒體檔案到播放器中即可播放。
注：上一曲、下一曲未實現。

素材

這裡寫圖片描述

效果圖

這裡寫圖片描述

style.css檔案

.mediaplayer {
    height: 350px;
    width: 534px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -267px;
    margin-top: -175px;
    box-shadow: 0px 0px 30px #555555;
    border 
: 1px solid rgb(153, 153, 153);
}

.video {
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0;
}

.process {
    position: absolute;
    height: 8px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    margin-top: -13px;
    z-index: 2;
    border-radius 
: 10px;
    display: none;
}

.process span {
    position: absolute;
    height: 100%;
}

.process #process-value {
    border-radius: 10px;
    width: 0px;
    box-shadow: 0px 0px 5px #555;
    background-color: #4d4d4d;
}

.process #process-sel {
    display: none;
    width: 1px;
    background-color: #000 
;
}

.tooltip {
    position: absolute;
    z-index: 9;
    display: none;
}

.tooltip span {
    position: absolute;
    color: #fff;
    top: -45px;
    font-size: 10px;
    line-height: 1.4em;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    padding: 2px 3px;
    background-color: #8A8A8A;
}

.tooltip span:after,
span:before {
    border: solid transparent;
    content: ' ';
    width: 0px;
    height: 0px;
    position: absolute;
    top: 20px;
}

.tooltip span:after {
    border-width: 5px;
    border-top-color: #8A8A8A;
    left: 13px;
}

.tooltip span:before {
    border-width: 6px;
    border-top-color: #FFFFFF;
    left: 12px;
}

.controls {
    position: absolute;
    text-align: center;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background: #d4d4d4;
}

.controls button {
    height: 100%;
    width: 10%;
    border: none;
    background-color: #00000000;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
}

.controls #video-btn-pre {
    background-image: url(../img/pre.png);
}

.controls #video-btn-pp {
    background-image: url(../img/play.png);
}

.controls #video-btn-next {
    background-image: url(../img/next.png);
}

.controls span {
    color: #555;
    position: absolute;
    top: 20px;
    text-shadow: 1px 1px 1px #AAAAAA;
}

.controls #curtime {
    left: 15px;
}

.controls #duration {
    right: 15px;
}

EventUtil.js檔案

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};

DIYVideoPlayer.html檔案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIY Video Player</title>
        <script type="text/javascript" src="js/EventUtil.js"></script>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    <body>
        <div class="mediaplayer">
            <div class="video">
                <video id="player" width="534" height="300" poster="img/poster.png">Video player not available.</video>
            </div>
            <div class="process" id="process">
                <span id="process-value"></span>
                <span id="process-sel"></span>
            </div>
            <div class="tooltip" id="tooltip">
                <span id="tooltip-value">00:00</span>
            </div>
            <div class="controls">
                <button id="video-btn-pre" />
                <button id="video-btn-pp" />
                <button id="video-btn-next" />
                <span id="curtime">00:00</span>
                <span id="duration">00:00</span>
            </div>
        </div>
    </body>
</html>

結束語

這是我在學習JavaScript時，利用所學知識綜合運用所寫，若有錯誤誤導大家，請大家留言溝通，謝謝。

基於HTML5自定義媒體播放器

簡要說明顯示播放時間、可操控進度條，播放視訊是通過拖拽媒體檔案到播放器中即可播放。注：上一曲、下一曲未實現。素材效果圖 style.css檔案 .mediaplayer { height

HTML5+CSS3+JQuery打造自定義視訊播放器

簡介 HTML5的<video>標籤已經被目前大多數主流瀏覽器所支援，包括還未正式釋出的IE9也宣告將支援<video>標籤，利用瀏覽器原生特性嵌入視訊有很多好處，所以很多開發者想盡快用上，但是真正使用前還有些問題要考慮，尤其是 Opera/Fir

jquery實現--自定義視訊播放器

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

Android使用Vitamio框架自定義視訊播放器

做過Android視訊播放器的碼農們都或多或少知道自帶的VideoView用著沒有那麼順心。需要處理很多東西。於是就各種度娘、Google。終於皇天不負苦心人。找到了一個卻又不大符合。無奈，想自己動手寫吧！又浪

Android自定義視訊播放器(網路/本地)

最近因公司專案要求需要寫一個播放器，自帶的又不太好用，也不太好看。自能自定義啦。查看了很多資料，都沒有完善的，還好得以為前輩的指點得以完成，感謝Yang。本篇裡面我有可能有些地方寫得不好(都附上了註釋)。希望各路大神指點，虛心受教。先來個圖(原始碼在後面附上) 視訊列表裡面

Android 自定義音樂播放器實現

Android自定義音樂播放器一：首先介紹用了哪些Android的知識點：1 MediaPlayer工具來播放音樂2 Handle。因為存在定時任務(歌詞切換，動畫，歌詞進度條變換等)需要由Handle來處理Ui相關內容3 動態許可權申請(該應用程式讀取本地歌曲，並且設定音質

Android自定義視訊播放器（三）

一、引言在上文中，我們通過自定義控制面板的佈局，來實現自定義的播放控制，下面來對裡面的各個元件進行事件繫結。 @Override public void onClick(View v) { if ( v == btnVoice ) {

android surfaceView+mediaPlayer 自定義視訊播放器

Android 視訊播放一般分為兩種（其實3種，還一種是調Android自帶播放器）： 1.使用Android自帶View VideoView ,其中一些功能，已經都給實現好了(此view一般不滿足自己的需求，比如：介面啊，控制啊，以及可能還有手勢控制音量，手勢控制亮度等等

Android自定義視訊播放器（六）

一、引言現在已經差不多完成了一個自定義的視訊播放器，還有一個讓視訊全屏播放的按鈕事件沒有繫結，下面會介紹。此外還要一個非常重要的功能就是，已經寫好了自定義的播放器，那麼就應該能被其他應用調起，來播放視訊，下面來完善這兩個功能。二、全屏按鈕事件

Android自定義視訊播放器（一）

一、引言我們在開發Android多媒體應用時，有兩種方式來播放多媒體資源。第一種是使用隱式的Intent，來使用系統或者手機已經安裝的第三方播放器應用來播放音視訊，第二種是使用Android自帶的、我們自定義的播放器來播放，這種主要是採用Android提供的

一步步自定義視訊播放器——使用SurfaceView播放視訊

Surface Surface與SurfaceView這篇文章對Surface和SurfaceView做了很詳細的解釋。簡單的說Surface對應了一塊螢幕緩衝區，每個window對應一個Surface，任何View都要畫在Surface的Canvas上。

實現簡單的自定義音樂播放器

這篇部落格只是記錄自己寫的js外掛，著重點在於js，而不是css或者html。所以在js方面會比較詳細，而其他的就只是簡單提提。剛學前端js那會，只是應付式的把書看完了，demo也沒寫幾個。碰巧這學期的網頁設計課程接近期末，老師要求要完成一個期末設計。好吧，就拿它來練

AVPlayer自定義視訊播放器

我的avplayer播放器,能橫屏,豎屏,適應螢幕,上程式碼 1.我把我的那個最主要的類的.m的主要的程式碼附上 @implementation LDZMoviePlayerController - (void)viewDidLoad { [super vie

iOS開發之仿微博視訊邊下邊播之自定義AVPlayer播放器，邊下邊播解剖。視訊處理流程，建立連線-請求資料-統籌資料-解碼資料-視訊呈現

Tips：這次的內容分為兩篇文章講述 01、[iOS]仿微博視訊邊下邊播之封裝播放器講述如何封裝一個實現了邊下邊播並且快取的視訊播放器。 02、[iOS]仿微博視訊邊下邊播之滑動TableView自動播放講述如何實現在tableView中滑動播放視訊，並且是流暢，不阻塞

Exoplayer+Exomedia打造自定義視訊播放器

寫在前面的話對App視訊播放模組進行擴充套件，需要自定義播放器的樣式、監聽視訊播放過程中各種事件（播放開始、暫停、重新播放、結束、拖拽進度條、橫豎屏切換等）、橫豎屏切換、手動控制播放進度等。自定義功能性、擴充套件性較好的視訊播放模組。初次技術選型時利用gith

Android自定義視訊播放器（二）

一、引言上一篇在對VideoView使用時，加上了這樣一行程式碼： videoView.setMediaController(new MediaController(this)); 這行程式碼為VideoView加上了控制面板，可以操作視訊播放的快

Java類載入器( CLassLoader ) 死磕7: 基於加密的自定義網路載入器本小節目錄

【正文】Java類載入器( CLassLoader ) 死磕7: 基於加密的自定義網路載入器本小節目錄 7.1. 加密傳輸Server端的原始碼 7.2. 加密傳輸Client端的原始碼 7.3. 使用亦或實現簡單加密和解密演算法 7. 網路加密SafeClassLoader的原

Android基於wheelView的自定義日期選擇器(可拓展樣式)

基於wheelView的自定義日期選擇器專案要求效果圖：要求 “6月20 星期五” 這一項作為一個整體可以滑動，”7時”、”48分”分別作為一個滑動整體。系統自帶的DatePicker、TimePicker大家都知道，只有這種效果:

基於bsd socket傳輸libmad解碼，alsa驅動的mp3流媒體播放器

1. 前言折騰了也有差不多一個來月，之前沒怎麼上手過linux下的C，很多東西都是想當然的狀態就開始東看看西敲敲了。這篇本章意在讓一個小白學會做一個流媒體播放器。我最開始就是個小白。 2. 準備工作 2.1 系統環境系統環境： ubuntu 12.04 編輯器： cod

基於EasyDarwin 流媒體播放器的客戶端開發

最近接觸了一個國內優秀的流媒體平臺- EasyDarwin。這是一個國外開源流媒體平臺Darwin深度裁剪版本，看了一段時間後就想跟自己的開發的一個android裝置對接，以了卻我多年對多媒體更深入的理解。（本人曾經自己開發一個H264的移動電視的軟解碼播放器）

基於HTML5自定義媒體播放器

簡要說明

素材

效果圖

style.css檔案

EventUtil.js檔案

DIYVideoPlayer.html檔案

結束語

相關推薦