[WordPress] 外掛分享: Bradmax Player

WordPress 外掛 Bradmax Player 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Bradmax Player」是 2018-01-04 上架。
  • 目前有 1000 個安裝啟用數。
  • 上一次更新是 2025-02-26,距離現在已有 67 天。
  • 外掛最低要求 WordPress 4.2 以上版本才可以安裝。
  • 有 11 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

bradmax |

外掛標籤

hls | HTML5 | video | mpeg-dash | video streaming |

內容簡介

Bradmax Player 是一個 WordPress 外掛,支援桌面及行動裝置上的影片串流播放。只要您具有以下格式的影片串流存取權限:
– HLS
– MPEG-DASH
– MS Smooth Streaming
或是簡單的 mp4、webM、ogg 檔,您就可以在您的網站上使用 Bradmax Player 播放這些影片,它甚至支援一些平台或裝置本身不支援的 HLS 或 MS Smooth Streaming 播放。在這種情況下,當播放時您的瀏覽器會即時「轉碼」影片。

此外,播放器還支援:

預覽圖片 – 影片的自訂圖片,在播放前顯示。
字幕 – 嵌入於 HLS、MPEG-DASH 或 MS Smooth Streaming 影片串流中,或是由 SRT、VTT 檔案格式的外部檔案提供。
基本影片統計 – 可以在播放器設定中貼上您的 Google Analytics 追蹤碼,以收集有關觀看次數和觀看時間的訊息。
影片章節和時間標籤 – 進一步擴充進度條,提供有關影片章節或時間標籤的額外訊息。

需求

您必須擁有一個使用 WordPress CRM 的自託管網站。

Bradmax Player 功能

在文章或頁面中或您 WordPress 網站中的任何位置嵌入影片串流(支援串流格式 HLS、MPEG-DASH 和 MS Smooth Streaming)。
在頁面中嵌入影片檔案(MP4、WebM、Ogg)。
嵌入響應式影片,以獲得更好的行動裝置瀏覽體驗。
嵌入預覽圖片的影片。
在頁面渲染時自動播放影片。
使用短碼在您的 WordPress 媒體庫中嵌入已上傳的影片檔案的直接連結。
無需進行任何設置,只需安裝即可開始嵌入影片。
輕巧且兼容最新版 WordPress。
提供潔淨、簡潔的播放器,無任何浮水印。
您可以更改播放器的外觀、顏色、標誌等等,以自訂播放器風格,只需要在 https://bradmax.com/site/en/signup 註冊帳戶即可。基本版本播放器是免費的。
嵌入帶有字幕的影片(字幕可從串流中載入或從 SRT、VTT 檔案類型的外部檔案載入)。
在 Google Analytics 帳戶中收集有關影片播放的基本統計資料。
播放受 DRM 保護的影片(僅適用於在 bradmax.com 下載自訂播放器的付費版本)。

Bradmax Player 外掛使用方法

為了嵌入影片,請創建新文章或頁面,然後使用以下短碼:

[bradmax_video url="https://bradmax.com/static/video/tos/big_buck_bunny.m3u8" duration="596" poster="https://bradmax.com/static/images/startsplash.jpg"]

「url」是影片串流的位置,您需要使用實際影片串流的 URL 取代示範 URL。
「duration」中包含影片長度(以秒為單位),以便在開始播放前在播放器中顯示。
「poster」是預覽圖片的位置,應顯示在播放器上。將示範 URL 替換為圖片的連結。

使用 Google Analytics 進行影片播放統計

播放器可以收集有關影片播放的基本統計資料。您只需將 Google Analytics 頁面上的「追蹤 ID」複製到播放器設定中即可。

獲取「追蹤 ID」,請打開:Google Analytics > 管理 > 追蹤資訊 > 追蹤碼。

「追蹤 ID」是具有「UA-XXXXXXXX」格式的代碼

原文外掛簡介

Bradmax Player is a plugin, which supports video streams playback on desktops and mobile devices. If you have access to video streaming in formats:
– HLS
– MPEG-DASH
– MS Smooth Streaming
or simple mp4, webM, ogg files, then you can watch them on your site with Bradmax Player. It is even supporting HLS or MS Smooth Streaming playback on platforms / devices, which
usually not support them. In such cases video is “transconded” on-fly in your browser during playback.
Player support also:

poster image – Custom image from video, which is displayed on player before playback.
subtitles – Embedded in HLS, MPEG-DASH, MS Smooth Streaming video stream or from external files in SRT, VTT file formats.
basic video statistics for Google Analytics – Just paste your Google Analytics tracker id into player settings for collecting information about video views and watched time.
video chapters & time markers – Extending progressbar with additional information about video chapters or time markers.

Requirements

A self-hosted website running on WordPress CRM.

Bradmax Player Features

Embed video streams into a post/page or anywhere on your WordPress site (supported streaming formats HLS, MPEG-DASH, MS Smooth Streaming).
Embed video files (MP4, WebM, Ogg) into your page.
Embed responsive videos for a better user experience while viewing from a mobile device.
Embed videos with poster images.
Automatically play a video when the page is rendered.
Embed videos uploaded to your WordPress media library using direct links in the shortcode.
No setup required, simply install and start embedding videos.
Lightweight and compatible with the latest version of WordPress
Clean and sleek player with no watermark.
Player customisation is available (change skin, colors, logo, etc.). It requires only sign-up on https://bradmax.com/site/en/signup . It’s free and basic version of player is also free.
Embed video with subtitles (subtitles loaded from stream or from SRT, VTT files).
Collect basic statistics about video playback in your Google Analytics account.
Playback of DRM protected video (only in paid version for custom player downloaded from bradmax.com).

Bradmax Player Plugin Usage
In order to embed a video create a new post/page and use the following shortcode:
[bradmax_video url="https://bradmax.com/static/video/tos/big_buck_bunny.m3u8" duration="596" poster="https://bradmax.com/static/images/startsplash.jpg"]

“url” is the location of your streaming. You need to replace the sample URL with the actual URL of the video stream.
“duration” contain length in seconds of video, so it can be displayed on player before staring playback.
“poster” is location of poster image, which should be displayed on player. Replace sample URL with link of your image.

Video playback statistics with Google Analytics
Player can collect basic statistics for video playback. You just need to copy your “Tracking ID” from Google Analytics page into player settings.
For finding “Tracking ID” please open: Google Analytics > Admin > Tracking Info > Tracking Code .
“Tracker ID” is code having form “UA-XXXXXXXX-X”, where X is 0-9 digit and you have to copy it into ga_tracker_id video shortcode option (see section below).
Player collects video playback details as “Events” in your Google Analytics account. There are available in sections:

Google Analytics panel > Real-Time > Events
Google Analytics panel > Behaviour > Events

Player is sending events:

event category: view , event action: started (send on starting video playback)
event category: player event, event action: playing/paused (send on play/pause video)
event category: progress seconds, event action: progress seconds (send every 10 sec of playback)

For each media distinction in statistics you have to specify in video shortcode option “media_id”. Then each event got additionaly “Event Label” with data provided from media_id parameter. media_id can be any text, which you want to define, but it is recomended to keep it short.
Video Shortcode Options
The following options are supported in the shortcode.
Autoplay
Causes the video file to automatically play when the page loads.
Note: Currenlty this option is working only on desktop devices with muted sound (see “Mute” shortcode). On mobile devices (phones, tablets, etc.) this option is not working.
It is platform limitation and clicking on video is required for starting playback.
[bradmax_video url="http://example.com/hls_stream.m3u8" autoplay="true"]

Mute
Causes the video starts with muted sound. This option is usefull for starting video automatically with “autoplay” option.
[bradmax_video url="http://example.com/hls_stream.m3u8" autoplay="true" mute="true"]

Duration
Defines length of video stream in seconds. Can contain fraction of second. It is required for displaying duration of video before staring playback.
[bradmax_video url="http://example.com/hls_stream.m3u8" duration="100.1"]

Poster
Defines image to show as placeholder before the video plays.
[bradmax_video url="http://example.com/hls_stream.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]

Pip
Enables additional button in player skin for enabling/disabling Picture-in-Picture mode. When PIP mode is enabled then player is detached from browser and user can watch video over other screens.
Note: This feature requires player at last v2.12.0 version. If you are using older customized player (changed colors, skin, etc.), then you have to generate new one on bradmax.com page.
PIP button appears after starting playback. Before it is blocked by browser.
[bradmax_video url="http://example.com/hls_stream.m3u8" pip="true"]

Chapters & Time markers
Defines additional info for video chapters. Such information will be presented on progress bar. Format for video chapters is similar to Youtube chapters in description.
Each chapter entry should be in separated line or separated from other entries using semicolon (;). Entry begins with start time of chapter and folowed by label for chapter.
Chapters use “chapters” attribute name and time markers “time_markers”.
[bradmax_video url="https://bradmax.com/static/video/tos/440272.mpd" duration="100.1" chapters="
0:00 - Intro
0:23 - 1. Preparations
3:18 - 2. Simulation
7:18 - 3. Defense
8:48 - 4. Forgiveness
9:38 - Credits
"
time_markers="
1:40 - Decoy
3:20 - Simulation start
5:30 - They are comming ...
8:08 - Rope slide
11:14 - Credits rope slide
"]

Example for semicolons instead of new lines – all in one line. Sometimes wordpress can have problems with multiline in shortcodes. Using semicolons will solve it.
[bradmax_video url="https://bradmax.com/static/video/tos/440272.mpd" duration="100.1" chapters="0:00 - Intro ; 0:23 - 1. Preparations ; 3:18 - 2. Simulation ;7:18 - 3. Defense ; 8:48 - 4. Forgiveness ; 9:38 - Credits"]

Class
Defines CSS class, which should be added into player box on page (customizing view on WordPress page).
[bradmax_video url="http://example.com/hls_stream.m3u8" class="my-custom-player-css-class"]

Style
Defines CSS style string, which should be added into player for on page (customizing view on WordPress page).
[bradmax_video url="http://example.com/hls_stream.m3u8" style="width:400px;height:200px;border:solid 1px gray"]

Subtitles
Defines list of subtitles files (one file per language) for video. Subtitles files has to be in SRT or VTT format (file extension *.srt or *.vtt). Format for subtitles list subtitles=”LANG_CODE=FILE_LINK LANG_CODE=FILE_LINK …”, where LANG_CODE is two letter language code (ISO 639-1 standard – https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for defining subtitles language. FILE_LINK is link to file stored on some HTTP server, which player will be able to download during playback.
Working example (subtitles in Czech language):
[bradmax_video url="https://bradmax.com/static/video/tos/tesla/tesla.m3u8" subtitles="cz=https://bradmax.com/static/video/tos/tesla/tesla_cz.srt"]

Example with multiple languages for video:
[bradmax_video url="http://example.com/hls_stream.m3u8" subtitles="en=https://example.com/subtitles_en.srt cz=https://example.com/subtitles_cz.srt sk=https://example.com/subtitles_sk.srt"]

ga_tracker_id
Defines Google Analytics tracker id. When defined video playback is tracked in your Google Analytics account in “Events” sections.
“Tracker ID” is code having form “UA-XXXXXXXX-X”, where X is 0-9 digit and is located in Google Analytics > Admin > Tracking Info > Tracking Code.
Example:
[bradmax_video url="http://example.com/hls_stream.m3u8" ga_tracker_id="UA-XXXXXXXX-X" media_id="my example stream"]

media_id
This parameter is used, when Google Analytics plugin is active (see ga_tracker_id video shortcode). It is used for each media distinction, so for each different video diferent value should be provided. It can be any text, but it is recomended to keep it short.
Alternative stream formats (url_2, url_3, url_4)
If you got video content (same title/media) in multiple formats eg. MPEG-DASH, HLS, MS Smooth Streaming you can provide them to player using shortcodes url_2, url_3, url_4 . Player automatically choses format with best support for device. You can put links in any order.
Example for video with many formats (MPEG-DASH and HLS):
[bradmax_video url="https://bradmax.com/static/video/tos/440272.mpd" url_2="https://bradmax.com/static/video/tos/440272.m3u8"]

live_
Player supports playback for live stream transmissions (HLS, MPEG-DASH, MS Smooth Streaming). For such transmissions are additonal parameters, which improve user experience.

live_end_date: Date time as ISO 8601 string (https://en.wikipedia.org/wiki/ISO_8601). Examples: “2020-06-10T20:00:00Z” (2020-06-10 20:00:00 UTC time zone), “2020-06-12T18:00:00+08:00” (2020-06-12 18:00:00 GMT+8 time zone). If defined, then player is able to detect end of live stream transmission. Without it player will be assume end of transmission and end splash screen will be presented.
live_thank_you_image_url: Link to custom end splash image, which should be shown after end of live stream transmission. If not defined then default start splash will be shown after end of transmission.
live_waiting_for_transmission_image_url: Link to custom waiting for transmission image, which should be shown when player is waiting for live stream transmission start. Requires live_end_date parameter for correct work – player is aware if it is before or after transmission.
live_low_latency_mode: Indicates if lowLatencyMode should be enabled. By default it is disabled. When live_low_latency_mode then latency optimization is used at the expense of quality (stream is in lower quality and can buffer more frequently, but with much lower latency). This mode is working only for HLS and MPEG-DASH streams. example configuration

Examples:
[bradmax_video url="http://example.com/hls_live_stream.m3u8" live_waiting_for_transmission_image_url="https://bradmax.com/static/images/waiting_for_transmission.jpg" live_thank_you_image_url="https://bradmax.com/static/images/thankyou_endsplash.jpg" live_end_date="2020-06-14T14:00:00+08:00"]

[bradmax_video url="http://example.com/hls_live_stream.m3u8" live_low_latency_mode="true"]

drm_
Player supports playback for DRM protected video – paid version of player downloaded from bradmax.com is required. Short codes for DRM configuration:

drm_prov: Type of provider. Mark “default” for enabling support DRMs for selected content. Available values: [‘default’, ‘ezdrm’, ‘keyos’]
drm_widevine_url: URL to Widevine DRM license server. It is required for decrypting Widevine protected videos.
drm_widevine_cust_data: Custom data in base64 encoded format for Widevine.
drm_playready_url: URL to MS PlayReady DRM license server. It is required for decrypting PlayReady protected videos.
drm_playready_cust_data: Custom data in base64 encoded format for MS PlayReady.
drm_fairplay_url: URL to FairPlay DRM license server. It is required for decrypting FairPlay protected videos.
drm_fairplay_cust_data: Custom data in base64 encoded format for FairPlay.
drm_fairplay_cert_url: URL to FairPlay certificate server.

Example:
[bradmax_video url="https://example.com/drm_protected_stream.mpd" drm_prov="default" drm_widevine_url="https://drm.example.com/license"]

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Bradmax Player」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


1.0.1 | 1.0.2 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6 | 1.1.7 | 1.1.8 | 1.1.9 | trunk | 1.1.10 | 1.1.11 | 1.1.12 | 1.1.13 | 1.1.14 | 1.1.15 | 1.1.16 | 1.1.17 | 1.1.18 | 1.1.19 | 1.1.20 | 1.1.21 | 1.1.22 | 1.1.23 | 1.1.24 | 1.1.25 | 1.1.26 | 1.1.27 | 1.1.28 | 1.1.29 | 1.1.30 | 1.1.31 |

延伸相關外掛(你可能也想知道)

  • Easy Video Player 》Easy Video Player 是一個易於使用的 WordPress 影片外掛程式,可展示您的影片。您可以嵌入自行架設的影片或使用直接連結外部架設的影片。, Easy Video Playe...。
  • MediaElement.js – HTML5 Video & Audio Player 》此外掛為 WordPress 設計的影音控制元件,是建立在 MediaElement.js HTML5 播放器程式庫之上,並為不支援 HTML5 的瀏覽器提供 Flash 或 Silverlight 候補播放...。
  • Videojs HTML5 Player 》Video.js HTML5 Player 是一個支持桌面和移動裝置視頻播放的用戶友好的外掛。它讓你輕鬆嵌入自主託管的視頻文件或使用 Video.js 庫的外掛視頻文件。, , Video...。
  • Video.js – HTML5 Video Player for WordPress 》, , 這是一個基於 Video.js HTML5 播放器庫所建立的 WordPress 外掛。它能夠讓您使用 HTML5 在文章或頁面中嵌入影片,並提供 Flash 回退支援非 HTML5 瀏覽器...。
  • WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps 》WordPress Mobile Pack 是一款能協助你將網站內容轉換為漸進式行動網路應用程式的 WordPress 外掛。它附帶多種行動應用主題,可單獨購買或作為一個套件購買。...。
  • Gravity Forms – Placeholders add-on 》將 Gravity Forms 外掛的 HTML5 placeholder 功能強化,將欄位標籤複製為 placeholder 並隱藏之。對於不支援 HTML5 placeholder 屬性的舊版瀏覽器,使用 Java...。
  • Video Player for WPBakery 》Video Player for WPBakery 是 WPBakery Page Builder 的一個外掛程式,可以讓您在 WordPress 網站中添加 YouTube、Vimeo 和自行托管的視頻(HTML5)。, 功能...。
  • mb.YTPlayer for background videos 》這是一個無框架的YouTube®視訊播放器,可讓您將任何YouTube®視訊作為Wordpress®網頁或文章的背景播放。, 您可以從設置面板啟用首頁播放(不需要許可證),或...。
  • Cincopa video and media plug-in 》無需多個 WordPress 外掛來管理您的媒體,Cincopa 是您所有媒體需求中唯一需要的外掛。使用 Cincopa 輕鬆地添加視頻、照片庫、幻燈片、音樂和播放列表等等。...。
  • PB oEmbed HTML5 Audio – with Cache Support 》這個外掛使用 WordPress 用於其他用途(例如YouTube視頻等)的 oEmbed 技術,為文章和頁面添加了放置音頻文件的功能。音頻文件使用 HTML5 音頻標籤嵌入,對於...。
  • Modernizr for WordPress 》這個外掛可以在你的WordPress安裝中加入 Modernizr。, Modernizr是一個小型JavaScript函式庫,用來檢測下一代網頁技術中的原生實作可用性,也就是來自HTML5和...。
  • Gravity Forms HTML5 Validation 》此外掛為Gravity Forms外掛新增原生HTML5驗證支援。, 支援標準與分頁表單。, 支援標準欄位, , 單行文字, 段落文字, 下拉式清單, 多選清單, 核取方塊, 數字, ...。
  • Flowplayer Video Player 》Flowplayer 影片播放器可在您的 WordPress 網站上添加一個影片短碼。使用此短碼,您可以嵌入一個影片檔案,並使用 Flowplayer HTML5 播放器進行播放。, 特點,...。
  • Radio Forge Muses Player with Skins 》RadioForge Players 可在瀏覽器中提供本機音頻播放。它支援所有的瀏覽器,包括 iOS、Android、Firefox、Chrome、Safari、IE 和 Opera。, RadioForge Players ...。
  • Video.js HLS Player 》Video.js HLS Player 是一個易於使用的外掛,可以使用此定制的 video.js 播放器將響應式/流體(或固定寬度)HLS 影片輕鬆嵌入 WordPress 文章和頁面中。嵌入...。

文章
Filter
Apply Filters
Mastodon