HTML5 Video Player

myVideo 哥的 播放機

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

查看範例 GitHub
  • 載入 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
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/movie.mp4" type="video/mp4">
</video>
Demo

基本參數

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

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

合併播放

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

$("#demo1").myVideo({
  width: "320px",
  height: "240px",
  merge: 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 的等待時間。

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

下載位置

myVideo-lastest.js

播放器主程式

myVideo.css

播放器樣式
ChangeLog

版本紀錄

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

First Initial.