瀏覽器播放影片控制開始時間和結束時間

2014-06-25 301 words 2 minutes

Contents

HTML5 的 <video> 元素除了基本的播放功能外，還支援透過 URL 的 Fragment（片段） 語法直接指定影片的開始和結束時間，不需要任何 JavaScript 就能讓影片從特定位置開始播放。這個規範稱為 Media Fragments URI。

Media Fragments URI 規範

Media Fragments URI 是 W3C 的標準規範，透過在 URL 後面加上 #t= 語法來指定時間範圍。

1

http://example.com/video.mp4#t=開始時間,結束時間

時間格式

支援兩種時間格式：

格式一：秒數（最常用）

1
2
3


#t=5        → 從第 5 秒開始
#t=5,15     → 從第 5 秒播放到第 15 秒
#t=0,30     → 從頭播放到第 30 秒

格式二：時:分:秒（HH:MM:SS）

1
2
3


#t=0:01:30          → 從 1 分 30 秒開始
#t=0:00:30,0:01:00  → 從 30 秒播放到 1 分鐘
#t=1:00:00          → 從第 1 小時開始

實際使用範例

在 `<video>` 標籤中使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- 從第 5 秒開始，播放到第 15 秒 -->
<video controls>
    <source src="video.mp4#t=5,15" type="video/mp4">
</video>

<!-- 從 1 分鐘 30 秒開始播放 -->
<video controls src="video.mp4#t=90"></video>

<!-- 從頭播放到第 30 秒 -->
<video controls src="video.mp4#t=0,30"></video>

只設定開始時間（不設結束時間）

1

http://www.yoursite.com/video.mp4#t=5

影片會從第 5 秒開始，一直播放到結束。

只設定結束時間

1

http://www.yoursite.com/video.mp4#t=0,15

從第 0 秒播到第 15 秒。

完整 URL 範例

1
2


http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15
http://www.yoursite.com/yourfolder/yourfile.mp4#t=0:00:05,0:00:15

瀏覽器支援情況

Media Fragments 在現代瀏覽器中的支援：

瀏覽器	支援
Chrome	✅ 支援
Firefox	✅ 支援
Safari	✅ 支援
Edge	✅ 支援
IE 11	⚠️ 部分支援

注意：某些瀏覽器在某些情況下可能不支援結束時間的設定，建議測試後再使用。

JavaScript 替代方案

若需要更可靠的跨瀏覽器控制，或需要動態設定播放位置，可以使用 JavaScript：

設定開始時間

1
2
3
4
5
6


const video = document.querySelector('video');

// 在 metadata 載入後設定時間
video.addEventListener('loadedmetadata', () => {
    video.currentTime = 5; // 跳到第 5 秒
});

設定開始和結束時間

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const video = document.querySelector('video');
const startTime = 5;
const endTime = 15;

video.addEventListener('loadedmetadata', () => {
    video.currentTime = startTime;
    video.play();
});

video.addEventListener('timeupdate', () => {
    if (video.currentTime >= endTime) {
        video.pause();
    }
});

動態生成帶時間戳的連結

1
2
3
4
5
6
7


function getVideoLink(url, start, end) {
    return `${url}#t=${start},${end}`;
}

// 使用
const link = getVideoLink('video.mp4', 30, 90);
// 結果：video.mp4#t=30,90

注意事項

伺服器必須支援 Range Requests：Media Fragments 需要伺服器回應 Accept-Ranges: bytes header，大多數靜態檔案伺服器都支援
跨域（CORS）限制：若影片來自不同網域，需要設定正確的 CORS headers
MP4 格式最相容：建議使用 MP4（H.264）格式，其他格式支援度不一