Clappr 一個可擴展的網絡媒體播放器

開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的Clappr 是一個可擴展的網絡媒體播放器。

Clappr 是一個可擴展的網絡媒體播放器。您的架構主要被投射到插件中，通過設計為項目添加低耦合性，并且可以輕松添加無限功能。

Clappr 默認使用HTMLVideoElement來保證對許多平臺的支持。您可以擴展默認的 HTML5 播放或播放界面以創建一種新的媒體支持，就像插件一樣！

HTMLVideoElement地址：https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement

Clappr用法

通過腳本標簽：

在您的 HTML 中添加以下腳本：

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
</head>

現在，創建播放器：

<body>
  <div id="player"></div>
  <script>
    var player=new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
  </script>
</body>

通過 npm 模塊：

該項目在 npm 上可用，網址為https://www.npmjs.com/package/@clappr/core

yarn install @clappr/core --save-dev

您應該使用以下選項指定資產所在位置的基本 URL baseUrl：

  var player=new Clappr.Player({
  	source: "http://your.video/here.mp4",
	  baseUrl: "http://example.com/assets/clappr"
  });

在上述情況下，Clappr 將期望所有資產（在 dist 文件夾中）都可以在“ http://example.com/assets/clappr-core ”訪問。您需要baseUrl在構建過程中安排要定位的資產。

為webpack安裝：

默認情況下，webpack 將查看該main字段package.json并使用項目的構建版本。如果這就是你想要的，那么你就沒有什么可做的了。

如果您想在構建過程中將 Clappr 自己構建到您的項目中，請將以下內容添加到您的 webpack 配置中：

resolve: {
    alias: { Clappr: '@clappr/core/src/main.js' },
    root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
    extensions: ['', '.js'],
}

API 文檔

player.attachTo(element)

您可以使用此方法將播放器附加到給定元素。parentId在傳遞參數的播放器實例化期間指定它時，您不需要這樣做。

player.play()

播放當前源。

player.pause()

暫停當前?源。

player.stop()

停止當前源。

player.mute()

使當前源靜音。

player.unmute()

取消靜音當前源。

player.seek(value)

尋找當前視頻 ( source)。例如，player.seek(120)將搜索到當前視頻的第 120 秒（2 分鐘）。

player.seekPercentage(value)

尋找當前視頻 ( source)。例如，player.seek(50)將尋找到當前視頻的中間。

player.isPlaying()

true如果當前源正在播放，則返回，否則返回false。

player.getPlugin(pluginName)

返回插件實例。例子：

var strings=player.getPlugin('strings');

此方法按名稱搜索Core和Container插件并返回找到的第一個。

player.getCurrentTime()

返回當前源的當前時間（以秒為單位）。

player.getDuration()

返回當前源的持續時間（以秒為單位）。

player.resize(size)

調整當前播放器畫布的大小。size參數應該是帶有heightand的文字對象width。例子：

player.resize({height: 360, width: 640});

player.destroy()

銷毀當前播放器并將其從 DOM 中移除。

player.load(source)

加載新源。

player.configure(options)

允許在創建播放器后對其進行配置。

Clappr配置

下面列出的所有參數都應添加到Clappr.Player對象實例化或通過player.configure.

例子：

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  parameter1: "value1",
  parameter2: "value2",
});

// or

player.configure({
  parameter3: "value3",
  parameter4: "value4",
})

請注意，通過configure的某些選項不會立即應用。在這種情況下，這些選項將在下一個視頻中應用。

Clappr內置插件

媒體控制

一個在視頻容器上呈現界面并添加控制播放操作（播放、暫停、停止）的可能性的插件。

點擊暫停

添加通過單擊容器元素在play/播放狀態之間切換的可能性。

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  // Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter
  clickToPauseConfig: { 
    onClickPayload: { any: 'any' } // sends the payload to container when clicked
});

隱藏式字幕

添加了自定義字幕標簽和標題的可能性。

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  closedCaptionsConfig: {
    title: 'Subtitles', // default is none
    ariaLabel: 'Closed Captions', // Default is 'cc-button'
    labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
  },
});

海報

通過將海報選項添加到 Clappr 播放器來定義海報圖像。它會在視頻嵌入后出現，在播放時消失，并在用戶停止視頻時返回。對于音頻廣播，海報在播放時保持可見。

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  poster: "http://url/img.png"
});

尋求時間

當鼠標懸停在媒體控件搜索欄上時通知當前時間。

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  // Only for live stream with DVR
  actualLiveTime: true, // default is false
  // Meant to be used with actualLiveTime
  actualLiveServerTime:  "2015/11/26 06:01:03" // default is current date
});

水印

在視頻上添加水印。在您的嵌入參數上放置watermark選項以自動在您的視頻上添加水印。通過定義position選項選擇角位置。位置可以是bottom-left、bottom-right和top-left。top-right要定義單擊水印時要打開的 URL，請使用watermarkLinkoption。如果watermarkLink未定義參數，水印將不可點擊。

var player=new Clappr.Player({
  source: "http://your.video/here.mp4",
  watermark: "http://url/img.png",
  position: 'top-right',
  watermarkLink: "http://example.net/"
});

—END—

開源地址：https://github.com/clappr/clappr

述

在 HTML5 中，我們可以通過 <video>標簽直接插入mp4、mov等格式的視頻，但這是瀏覽器默認的方式，播放的功能也比較單一，我們一般會借助第三方的視頻播放器來實現豐富的播放效果。

西瓜播放器

一款帶解析器、能節省流量的HTML5視頻播放器，相對于 video.js，西瓜播放器能夠在播放器端實現加載視頻、解析視頻、轉換格式，讓不支持分段播放的mp4動態支持，這樣就無須轉換源視頻的格式，服務器端也無其他開銷。

項目主頁：https://v2.h5player.bytedance.com/

項目代碼：https://github.com/bytedance/xgplayer

video.js

video.js 據說是目前最流行的 HTML5 視頻播放器，star37K，應該所言不虛，該項目自 2010 年啟動，已經在超過 70 萬的網站中使用。 video.js 支持 HTML5 視頻和媒體源擴展，以及其他播放技術，如 YouTube 和 Vimeo（通過插件）。它支持在臺式機和移動設備上播放視頻。百度網盤、慕課網的視頻播放也是使用的這款插件。

官網地址：https://videojs.com/

項目代碼：https://github.com/videojs/video.js

中文文檔：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html

MediaElement.js

MediaElement是一款老牌的 HTML5播放器控件，有很多知名開源庫都使用了它，包括 WordPress、Drupal、Joomla、jQuery、typo3 等，MediaElement現在是WordPress核心的一部分。

項目主頁：https://www.mediaelementjs.com/

項目代碼：https://github.com/mediaelement/mediaelement

Plyr

Plyr 是一個簡單的可定制的 HTML5 媒體播放器，使用原生 JavaScript 沒有其他依賴。支持 YouTube 和 Vimeo 。

官方網站：https://plyr.io/

項目代碼：https://github.com/sampotts/plyr

華播放器（SmartPlayer）是一款非常優秀的安防領域播放軟件，用戶可以在該軟件中逐幀的查看視頻，支持Smart265/H265編碼方式.avi/.asf格式錄像播放，同時用戶還可以在軟件中選擇中英文切換，非常便捷。該軟件支持同時播放多個視頻，支持同步異步播放，自定義分割畫面。

來源：http://www.3h3.com/soft/270795.html#jptj

軟件特色

支持逐幀倒放功能，不僅支持單幀倒放，還支持多倍數倒放。

支持多路同步播放功能。

支持鼠標操作局部放大和拖動功能，即電子云臺功能。

支持分段預覽功能，快速找到所需場景，并能對各段進行同步播放。

支持播放智能設備碼流，在畫面上展示智能事件信息。

支持碼流篡改檢測功能，支持碼流格式轉換功能。

支持視頻屬性查看。

支持 H265、svac 碼流。

支持 avi、mp4、flv、asf、mov、dav、dav_文件播放。

支持亮度、對比度、飽和度、色度顯示調節功能。

支持快捷鍵設置功能。

優化音視頻同步策略。

優化快放策略，支持更改倍數快放。

優化時間軸，增強其呈現視頻的方式。

優化文件列表管理。

播放普通視頻時支持播放錄像內分屏功能。

播放魚眼視頻時支持魚眼功能

更新內容

1、修復180;魚眼錄像矯正錯誤問題；

2、修復魚眼錄像OSD信息被截取問題；

3、修復智能規則線不準確問題；

4、修復英文環境下錄像文件類型顯示亂碼問題。

在線咨詢

上一篇：JavaScript之匿名函數
下一篇：終于告別紅綠燈設計！小米神秘新機遭曝光：后置雙攝豎排

您的項目需求

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

整合營銷服務商