HTML5 Video Player

myVideo 哥的 播放機

自製 HTML5 播放機 UI,可以調整播放速度、合併多個不同來源的 MP4 檔案並接續播放,基於 jQuery Plugin 方式撰寫。

  • 載入 jQuery、myVideo-lastest.js 與 myVideo.css。
  • 在頁面放入標準 HTML5 video 與 source。
  • 呼叫 $("#demo1").myVideo() 或帶入 merge、width、height 參數。
即時 Demo

合併播放時間軸

上方播放器會把兩段影片接成同一個播放流程。

01

自製播放 UI

把 HTML5 video 包成 jQuery Plugin,提供站台一致的播放控制介面。

02

多片段合併

可將多個 MP4 source 合併成同一條時間軸,預載下一段並依設定循環播放。

03

播放速度控制

適合教學、監控、示範影片等需要快速切換播放速度的情境。

Usage

功能參數說明

保留原本三種示範入口,並把常用參數整理成可掃描的文件卡片。

width

指定播放器寬度。

'320px'
height

指定播放器高度。

'240px'
merge

是否將多個 source 合併為同一條播放時間軸。

true / false
loop

預設開啟循環播放;取消後播完最後一段即停止。可在設定面板切換。

true / false(預設 true)
preloadNext

預先載入下一段,縮短接段等待。可在設定面板關閉以節省流量。

true / false(預設 true)
loadTimeout

載入影片或探測片長的等待上限,單位為毫秒;失敗後可按播放重試。

15000
req_duration

合併影片時可預先指定 source 片長,減少載入等待。

req_duration="16.684"
Examples

範例與程式碼

傳統用法、基本參數、合併播放三種情境都保留獨立頁面,方便快速驗證。

Demo

傳統用法

最小範例,載入 plugin 後直接套用在 video 元素。

<script src="/inc/javascript/jquery/myVideo/myVideo-lastest.js"></script>
<link href="/inc/javascript/jquery/myVideo/myVideo.css" rel="stylesheet" type="text/css">
<script>
$(function(){
  $("#demo1").myVideo();
});
</script>
<video id="demo1">
  <source src="/demo/htm/myVideo/demo1/20200911_1599793208459_1599789604914.mp4" type="video/mp4">
</video>
Demo

基本參數

調整寬高並保留單影片播放模式。

$("#demo1").myVideo({
  width: "320px",
  height: "240px",
  merge: false
});
Demo

合併播放

把多個 source 接成連續播放時間軸,適合分段影片。

$("#demo1").myVideo({
  width: "320px",
  height: "240px",
  merge: true,
  loop: true,
  preloadNext: true
});

<video id="demo1">
  <source req_duration="16.684" src="deer.mp4" type="video/mp4">
  <source req_duration="10.544" src="bird.mp4" type="video/mp4">
</video>
Performance Note

合併播放建議

合併影片時,建議在 source 加上 req_duration,如 req_duration="471.388997",可以減少瀏覽器讀取 metadata 的等待時間。V0.05 預設預載下一段;實際接段速度取決於瀏覽器與影片伺服器的快取設定,無法保證零間隔。

duration 可事先用 ffprobe 查詢: ffprobe movie.mp4 -show_streams -select_streams v:0 -of json
Download

下載位置

myVideo-0.05.js

V0.05 固定版本

myVideo-lastest.js

播放器主程式

myVideo.css

播放器樣式
ChangeLog

版本紀錄

Tue Nov 03 2026 Feather Mountain <https://3wa.tw> 0.05

新增循環播放與下一段預載設定(預設開啟);修正音量還原、跨段跳轉、時間軸尾端、事件標記與載入錯誤處理,並加入 destroy() 與移除時自動清理。

Fri Sep 11 2020 Feather Mountain <https://3wa.tw> 0.01

First Initial.