開源項目評測之Html5視頻播放器推薦

eb項目開發中視頻播放是一個非常常見的需求，需要播放器能夠支持pc端和移動端的使用，并且支持常見的視頻格式。我們從github上精選了5款優秀的Html5 播放器插件分享給大家。（排名不分先后）

Ckplayer

ckplayer是一款在網頁上播放視頻的開源軟件，主要特點是：開源，功能強大，不依賴其它插件，二次開發方便。

ckplayer基于MIT協議開源。

ckplayer示例圖

當家官網最新版本是X2，更新時間：2020.09.20。

軟件下載后，使用到的文件如下：

ckplayr 文件

一般項目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 總大小不超過700k。

ckplayer 支持flv、mp4、m3u8、webm等。

功能上常用的播放控制、彈幕、貼片廣告都支持。

2、 Media-element.js

HTML5<audio>或<video>播放器，支持MP4、WebM和MP3，以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器，在所有瀏覽器中實現一致的UI。

media-element.js 示例圖

支持視頻和音頻播放，主要強調在多終端上的界面一致性。

最新版本4.2.17，更新日期：2021-7-6

media-element 所需文件截圖

使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js，大小在300k左右，非常小巧。

重點：提供插件機制，通過插件可以實現常見的播放列表、AirPlay、位置標記、視頻預覽等功能。

3、 VideoJs

開源HTML5和Flash視頻播放器。目前多很大廠在使用。官網宣稱世界上最流行的開源html5播放器。

video.js

支持的視頻格式有：mp4，webm，ogv。

最新版本7.14.3, 更新時間：2021-7-27

video.js 文件

文件大小約：700k。

4、 Dplayer

非常可愛的html5 彈幕視頻播放器。主打彈幕功能，支持MP4、HLS、FLV、WebTorrent播放，提供彈幕接口。

國人開發，有中文文檔。國內很多公司在用。

最新版本v1.26.0 更新日期：2020-6-11

dplayer文件

基本功能使用文件大小161k. 另外也提供了很多插件供使用。

5、 Xgplayer

西瓜視頻播放器（HTML5）、一款帶解析器、能節省流量的HTML5視頻播放器。字節跳動提供的開源視頻播放器。

PC Web端支持直接播放mp4視頻，播放HLS、FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions
iOS系統Web場景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH
安卓系統Web場景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions

中文文檔寫得很非常全面。支持airplay、彈幕等功能。

支持視頻、音頻播放。基于插件機制，提供了豐富的插件來擴展播放器的功能。官網提供在線生成器來簡化各種參數的配置，如下圖：

推薦使用。

今天為大寫整理了5個優秀的開源視頻播放器的內容，后期會再更新各個播放器的詳細使用并進行詳細的評測，謝謝大家。

lv.js 是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發，沒有用到 Flash。由 bilibili 網站開源。

引入js

    <script src="flv.min.js"></script>

視圖

<div class="main">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <!--<button onclick="flv_load()">加載</button>-->
        <button onclick="flv_start()">開始</button>
        <button onclick="flv_pause()">暫停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳轉</button>
    </div>

網頁開發中，跟蹤用戶與多媒體內容（如視頻）的互動是一項常見需求。無論是教育平臺、數據分析，還是用戶參與度統計，監控用戶如何觀看視頻內容都能提供寶貴的見解。這篇文章將探索如何使用JavaScript實現視頻播放時長的跟蹤。

目標

我們的目標是跟蹤用戶觀看視頻的總時長，包括暫停的時間，并將這些信息更新到后臺系統。我們將通過捕獲播放、暫停和結束等事件來計算觀看時間。

實現步驟

讓我們來分解一下實現的關鍵方面：

1. HTML結構

我們將使用HTML5的<video>標簽將視頻嵌入到網頁中。每個視頻元素都將有一個唯一的標識符，以便在JavaScript中輕松訪問。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>視頻播放時長跟蹤</title>
  </head>
  <body>
    <!-- 視頻容器 -->
    <video id="video_content1" width="640" height="360" controls>
      <!-- 視頻源 -->
      <source src="your_video_source.mp4" type="video/mp4" />
    </video>

    <!-- 包含JavaScript代碼 -->
    <script src="your_script.js"></script>
  </body>
</html>

2. JavaScript實現

在JavaScript文件（your_script.js）中，我們將處理視頻事件并計算總的觀看時間。

// 獲取視頻元素
let videoMat = "your_video_source.mp4";
let source = document.createElement('source');
let video = document.getElementById('video_content1');

// 設置視頻源
source.src = videoMat;
source.type = 'video/mp4';

// 將源附加到視頻元素
if (video) {
  video.appendChild(source);

  // 初始化變量
  let startTime = null;
  let lastUpdateTime = null;
  let totalElapsedTime = 0;

  // 'play'事件監聽器
  video.addEventListener('play', function () {
    startTime = new Date();
    lastUpdateTime = startTime;
    console.log('視頻正在播放。開始時間:', startTime);
  });

  // 'timeupdate'事件監聽器
  video.addEventListener('timeupdate', function () {
    if (!video.paused && startTime !== null) {
      const currentTime = new Date();
      const elapsedSinceLastUpdate = (currentTime - lastUpdateTime) / 1000;
      totalElapsedTime += elapsedSinceLastUpdate;
      lastUpdateTime = currentTime;
      console.log("從開始到現在的觀看時間: " + totalElapsedTime + " 秒");
    }
  });

  // 'pause'事件監聽器
  video.addEventListener('pause', function () {
    // 僅當視頻已在播放時存儲暫停時間
    if (startTime !== null) {
      const pausedTime = video.currentTime;
      console.log('視頻已暫停。暫停時刻:', pausedTime);
      checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
    }
  });

  // 'ended'事件監聽器
  video.addEventListener('ended', function () {
    // 視頻播放已結束
    checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
  });

  // 'play'事件監聽器（從暫停時間繼續播放）
  video.addEventListener('play', function () {
    // 如果視頻之前暫停，繼續從暫停時刻播放
    if (startTime !== null) {
      video.currentTime = video.currentTime;
    }
  });
}

解釋

HTML結構：我們使用<video>標簽嵌入視頻，并提供一個唯一標識符（video_content1）以便在JavaScript中訪問。我們在body末尾包含JavaScript文件，以確保DOM加載完成后再運行腳本。
JavaScript實現：

我們動態設置視頻源。
設置了播放、時間更新、暫停和結束事件的監聽器。
在‘play’事件中，我們捕獲開始時間和最后更新時間。
在‘timeupdate’事件中，我們不斷計算自上次更新以來的觀看時間。
視頻暫停時，我們存儲暫停時間并更新后臺。
‘ended’事件表示視頻播放結束。

結論

實現視頻播放時長的跟蹤可以增強用戶分析，提供有關用戶參與度和內容受歡迎程度的見解。這里提供的JavaScript代碼為您集成視頻跟蹤到網頁應用中提供了基礎。

記得將‘your_video_source.mp4’和‘your_video_title’替換為實際的視頻源和標題。

祝您編碼愉快！

在線咨詢

上一篇：HTML 編輯器
下一篇：html網頁源代碼模板大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

開源項目評測之Html5視頻播放器推薦

目標

實現步驟

結論

您的項目需求