把 HTML5 video 包成 jQuery Plugin,提供站台一致的播放控制介面。
可將多個 MP4 source 合併成同一條時間軸,預載下一段並依設定循環播放。
適合教學、監控、示範影片等需要快速切換播放速度的情境。
保留原本三種示範入口,並把常用參數整理成可掃描的文件卡片。
width
指定播放器寬度。
'320px'height
指定播放器高度。
'240px'merge
是否將多個 source 合併為同一條播放時間軸。
true / falseloop
預設開啟循環播放;取消後播完最後一段即停止。可在設定面板切換。
true / false(預設 true)preloadNext
預先載入下一段,縮短接段等待。可在設定面板關閉以節省流量。
true / false(預設 true)loadTimeout
載入影片或探測片長的等待上限,單位為毫秒;失敗後可按播放重試。
15000req_duration
合併影片時可預先指定 source 片長,減少載入等待。
req_duration="16.684"傳統用法、基本參數、合併播放三種情境都保留獨立頁面,方便快速驗證。
最小範例,載入 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>
調整寬高並保留單影片播放模式。
$("#demo1").myVideo({
width: "320px",
height: "240px",
merge: false
});
把多個 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>
合併影片時,建議在 source 加上 req_duration,如 req_duration="471.388997",可以減少瀏覽器讀取 metadata 的等待時間。V0.05 預設預載下一段;實際接段速度取決於瀏覽器與影片伺服器的快取設定,無法保證零間隔。
ffprobe movie.mp4 -show_streams -select_streams v:0 -of json
新增循環播放與下一段預載設定(預設開啟);修正音量還原、跨段跳轉、時間軸尾端、事件標記與載入錯誤處理,並加入 destroy() 與移除時自動清理。
First Initial.