Video Player 介面,附來自 Sintel 預告片的示例畫面。
Video Player 介面,附來自 Sintel 預告片的示例畫面。
© copyright Blender Foundation | durian.blender.org · CC BY 3.0
← 全部原生指南

Xodera Plugins · Bubble Native

Xodera Video Player Native

在您的應用內顯示課程、產品示範與支援的直播串流,提供播放控制、全螢幕以及可用的語言軌道。

Public beta guides · Haptics instructions are in its Bubble listing

Public beta offer: free Bubble install · 7-day card trial, then US$1.50/month per plugin/project.

文件審閱日期:2026年11月6日

實用範例

訓練應用程式中的章節連結

學習者需要在不跳轉至外部播放器的情況下重播示範的某一步驟。

`source_url = Current Lesson’s video URL`;`poster_url = Current Lesson’s cover`;每個章節儲存應用程式擁有的開始時間。

章節點擊 → 若更換來源,等待 `source_loaded` → Seek 到 `position_seconds` → Play。使用 Set playback rate 進行詳細示範,並在需求時使用 Enter fullscreen。

讀取 `position_seconds`、`duration_seconds` 與 `is_fullscreen`;您的工作流程僅為當前來源儲存課程進度。

在 `player_error` 時,顯示 `error_code`,保留進度並提供 Reload video。完成事件並不代表已通過課程或安全評估。

使用直接影片檔案或支援的串流。此播放器不支援匯出影片。

市集商品列表中的影片示範

單靠商品圖片無法說明商品如何運作,但外部影片會中斷購買流程。

`source_url = Selected Listing’s demonstration URL`;`poster_url = its thumbnail`;`muted = yes` 用於刻意靜音的首次預覽。

開啟選取的商品 → 綁定其影片 → 在使用者操作後執行 Play。提供 Set muted 以開啟聲音,提供 Enter fullscreen 以進行更近距離檢視。將 `is_active` 綁定至詳細檢視是否可見。

使用 `has_source`、`is_buffering` 與 `status` 以區分影片缺失、載入中與媒體就緒狀態。

在更換來源時,停止套用舊的進度與軌道選擇。當選取的檔案不支援時,顯示縮圖備用。

使用直接影片檔案或支援的串流。此播放器不支援匯出影片。

在受支援的串流中選擇可用的語言軌道

多語言應用程式需要提供特定來源實際包含的軌道。

`source_url = Selected Programme’s accepted stream URL`;來源本身必須提供相容的音訊/字幕軌道。

在 `tracks_changed` 上,讀取目前的 `audio_tracks_json` 和 `subtitle_tracks_json`;在您的應用程式中建立選項,並以目前的索引呼叫 Select audio track 或 Select subtitle track。

使用 `selected_audio_index`、`selected_subtitle_index` 和 `source_generation` 將選項與此來源關聯。

每次來源變更後重新建立選項。若軌道缺失或不支援,保留預設軌道並誠實顯示其可用性。

使用直接影片檔案或支援的串流。此播放器不支援匯出影片。

目前可用功能

Public beta. Use the documented controls and actions; test supported formats, permissions and device behavior in your own native app. Browser preview does not validate native device output.

建立工作流程

使用下方可用的測試版操作,並在目標裝置上測試結果。

這些範例使用如 Lesson、Message 和 Order 的應用程式記錄。請以您自己的資料類型和元素名稱取代它們。範例媒體位址必須替換為您自己的檔案。

  1. 設定 source_url = Selected Lesson's video_url 和 poster_url = Selected Lesson's poster_url。播放 MP4 時使用 auto 或 progressive;播放 HLS 串流時使用 hls。

  2. 在 playback_ready 後,使用 Seek 於已儲存的 position_seconds 繼續。使用者開始 Play。設定 is_active 以指示課程檢視是否開啟。

  3. 新增 Play、Pause、Seek、Set playback rate 與 Enter fullscreen 控制項。顯示 position_seconds 和 duration_seconds。

  4. 在 tracks_changed 後,顯示此影片可用的 audio_tracks_json 與 subtitle_tracks_json 選項。將選取的索引傳遞給 Select audio track 或 Select subtitle track。在 ended 事件發生時,儲存進度。

工作流程圖 — 不是應用程式截圖

一次性設定

在 BestPlugins → Dashboard → Plugins 中建立或選取您的 Bubble 應用程式專案。選擇 Xodera Video Player Native,複製其金鑰,然後開啟 Bubble → Plugins → Xodera Video Player Native,將金鑰貼入 licensing_api_key。儲存一次;之後使用下方操作。每個專案中的每個外掛都有其專屬金鑰。

使用直接的影片或串流位址。YouTube 或 Vimeo 網頁位址並非直接的影片檔案。播放不需要相機或麥克風存取權。

一次性設定
  1. 在 BestPlugins → Dashboard → Plugins 中建立或選取您的 Bubble 應用程式專案。
  2. 選取此外掛並複製其專案金鑰。
  3. Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
  4. 加入元件,選取您的應用程式資料,並建立下方的工作流程。
  5. In the dashboard, review and confirm the 7-day card trial for this plugin. It then costs US$1.50/month per app project, including development and production. Cancel before the trial ends to avoid the first charge.
安裝與訂閱

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

將結果儲存至您的應用程式

範例 WatchProgress:owner = Current User、lesson = Selected Lesson、seconds = Video Player's position_seconds、duration = Video Player's duration_seconds。僅為目前選取的影片儲存。軌道索引屬於該影片,不應儲存為永久語言選項。

失敗、取消與復原

在 player_error 上,顯示 error_code 並提供 Reload video。它會重新載入但不會開始播放。選取其他來源會清除舊的軌道選擇。離開視圖時會暫停影片;使用者按下 Play 繼續。

功能與限制

速度:0.5、1、1.5 與 2。音量:0–1。格式:auto、progressive、HLS 以及僅限 Android 的 DASH。可用軌道取決於檔案。使用 -1 可關閉軌道;-2 表示未知,無法選取。無編輯、影片匯出、DRM、畫中畫或永久離線快取功能。

設定、操作與結果

在 Bubble 中使用這些名稱。計畫中的功能會另行標示。

可用的測試版設定

元素設定

source_url · textposter_url · textcontent_type · textrate · numbervolume · numbermuted · yes/noloop · yes/nois_active · yes/nodisabled · yes/nonative_controls · yes/noui_text_json · textlanguage · text

狀態

is_playing · yes/nois_buffering · yes/nopending_play · yes/nois_live · yes/nomuted · yes/noloop · yes/nohas_source · yes/nois_fullscreen · yes/noposition_seconds · numberduration_seconds · numbervolume · numberrate · numbersource_generation · numberselected_audio_index · numberselected_subtitle_index · numberstatus · textaudio_tracks_json · textsubtitle_tracks_json · texterror_code · texterror_message · text

事件

source_changedsource_loadedplayback_readyplaying_changedtime_changedendedtracks_changedfullscreen_changedplayer_error

操作及其輸入

PlayPauseStop and rewindReload videoSeekSet volumeSet mutedSet playback rateEnter fullscreenSelect audio trackSelect subtitle track
元素設定 · 12
source_urltext · 預設: ""
範例值https://bestplugins.online/native-samples/lesson.mp4
範例 Bubble 表達式Selected Lesson's video_url
所選音訊、影片或圖片檔案的位址。使用此插件支援的檔案類型。
poster_urltext · 預設: ""
範例值https://bestplugins.online/native-samples/poster.jpg
範例 Bubble 表達式Selected Lesson's poster_url
使用目前業務記錄的值;依以下限制進行驗證。
content_typetext · 預設: "auto"
範例值auto
範例 Bubble 表達式Selected Lesson's video_content_type
使用目前業務記錄的值;依以下限制進行驗證。
ratenumber · 預設: 1
範例值1.5
範例 Bubble 表達式Speed Dropdown's value
使用目前業務記錄的值;依以下限制進行驗證。
volumenumber · 預設: 1
範例值0.8
範例 Bubble 表達式Volume Slider's value
使用目前業務記錄的值;依以下限制進行驗證。
mutedyes/no · 預設: false
範例值no
範例 Bubble 表達式Mute Checkbox is checked
使用目前業務記錄的值;依以下限制進行驗證。
loopyes/no · 預設: false
範例值no
範例 Bubble 表達式Selected Lesson's repeat_enabled
使用目前業務記錄的值;依以下限制進行驗證。
is_activeyes/no · 預設: true
範例值yes
範例 Bubble 表達式GuideHost's view_is_active (your yes/no custom state)
在此視圖開啟時設為是,離開時設為否,以便停止播放或當前工作。
disabledyes/no · 預設: false
範例值no
範例 Bubble 表達式GuideHost's is_busy (your yes/no custom state)
當您的應用忙碌或此操作不可用時,停用該元件。
native_controlsyes/no · 預設: false
範例值no
範例 Bubble 表達式App Settings' use_native_video_controls
顯示或隱藏裝置的標準影片控制項。
ui_text_jsontext · 預設: "{}"
範例值{}
範例 Bubble 表達式App Settings' player_labels_json (supported keys only)
可選的 JSON,包含支援的按鈕標籤。留空則使用內建文字。
languagetext · 預設: "auto"
範例值uk
範例 Bubble 表達式Current User's preferred_language
設定 language=auto 以跟隨支援的裝置或瀏覽器語言。輸入支援的語言代碼以明確選擇。
操作及其輸入 · 11
Play

無操作參數

Pause

無操作參數

Stop and rewind

無操作參數

Reload video

無操作參數

Seek
position_secondsnumber · 預設: —
範例值45
範例 Bubble 表達式Selected Chapter's start_seconds
使用目前業務記錄的值;依以下限制進行驗證。
Set volume
volumenumber · 預設: —
範例值0.8
範例 Bubble 表達式Volume Slider's value
使用目前業務記錄的值;依以下限制進行驗證。
Set muted
mutedyes/no · 預設: —
範例值no
範例 Bubble 表達式Mute Checkbox is checked
使用目前業務記錄的值;依以下限制進行驗證。
Set playback rate
ratenumber · 預設: —
範例值1.5
範例 Bubble 表達式Speed Dropdown's value
使用目前業務記錄的值;依以下限制進行驗證。
Enter fullscreen

無操作參數

Select audio track
indexnumber · 預設: —
範例值0
範例 Bubble 表達式Selected row's current_source_index
使用目前業務記錄的值;依以下限制進行驗證。
Select subtitle track
indexnumber · 預設: —
範例值0
範例 Bubble 表達式Selected row's current_source_index
使用目前業務記錄的值;依以下限制進行驗證。
狀態與事件

狀態

is_playing · yes/no

所選項目的當前值。於相關事件後讀取。

is_buffering · yes/no

所選項目的當前值。於相關事件後讀取。

pending_play · yes/no

所選項目的當前值。於相關事件後讀取。

is_live · yes/no

所選項目的當前值。於相關事件後讀取。

muted · yes/no

所選項目的當前值。於相關事件後讀取。

loop · yes/no

所選項目的當前值。於相關事件後讀取。

has_source · yes/no

所選項目的當前值。於相關事件後讀取。

is_fullscreen · yes/no

所選項目的當前值。於相關事件後讀取。

position_seconds · number

所選項目的當前值。於相關事件後讀取。

duration_seconds · number

所選項目的當前值。於相關事件後讀取。

volume · number

所選項目的當前值。於相關事件後讀取。

rate · number

所選項目的當前值。於相關事件後讀取。

source_generation · number

所選項目的當前值。於相關事件後讀取。

selected_audio_index · number

所選項目的當前值。於相關事件後讀取。

selected_subtitle_index · number

所選項目的當前值。於相關事件後讀取。

status · text

此操作的當前結果。於儲存成功前使用相符的完成事件。idle,loading,readyToPlay,error

audio_tracks_json · text

所選項目的當前值。於相關事件後讀取。

subtitle_tracks_json · text

所選項目的當前值。於相關事件後讀取。

error_code · text

上一次操作的錯誤資訊。顯示有用的訊息並提供相關的重試。

error_message · text

上一次操作的錯誤資訊。顯示有用的訊息並提供相關的重試。

事件

source_changed

當此事件發生時,從同一元素讀取相關狀態。

source_loaded

當此事件發生時,從同一元素讀取相關狀態。

playback_ready

當此事件發生時,從同一元素讀取相關狀態。

playing_changed

當此事件發生時,從同一元素讀取相關狀態。

time_changed

當此事件發生時,從同一元素讀取相關狀態。

ended

當此事件發生時,從同一元素讀取相關狀態。

tracks_changed

當此事件發生時,從同一元素讀取相關狀態。

fullscreen_changed

當此事件發生時,從同一元素讀取相關狀態。

player_error

當此事件發生時,從同一元素讀取相關狀態。

開發者常問問題

我可以匯出選取的片段嗎?

不行。Seek 與全螢幕會改變播放,而非影片位元組。

訂閱如何運作?

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

相關指南

如需協助,請告訴我們您使用的插件與裝置、嘗試的操作以及發生的情況。請使用不含個人資料的範例。切勿分享您的金鑰或私人檔案。