开源项目评测之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视频播放器推荐

目标

实现步骤

结论

您的项目需求