iOS HTML5 Video 標籤直接播放 M3U8 串流的完整解決方案

問題背景

在 iOS 裝置上使用 HTML5 <video> 標籤播放 M3U8 格式的串流媒體時，開發者常遇到一個棘手的問題：頁面載入後影片並不會自動播放，而是需要使用者手動點擊影片區域，隨後才會進入全螢幕模式播放。這嚴重影響了使用者體驗，特別是對於需要內嵌播放、自動播放或靜音播放的應用場景。

核心原因分析

iOS 的 Safari 瀏覽器出於節省頻寬與防止騷擾的考量，預設禁止媒體自動播放（Auto-play Policy）。對於 <video> 元素，必須滿足以下條件才能實現「非全螢幕、直接播放」：

• 設定 playsinline 屬性（WebKit 專屬屬性 webkit-playsinline 亦可）
• 設定 muted 屬性（靜音）或透過使用者互動（如點擊）觸發播放
• 來源必須為有效的 HLS (M3U8) 串流，且伺服器需支援 Range Requests 與正確的 Content-Type: application/vnd.apple.mpegurl

完整程式碼範例

<video 
    id="video_player" 
    width="640" 
    height="352" 
    controls 
    playsinline 
    webkit-playsinline 
    muted 
    src="https://example.com/stream.m3u8">
    Your browser does not support the video tag.
</video>

進階控制：JavaScript 輔助自動播放

若需在頁面載入後嘗試自動播放（靜音模式），可搭配以下腳本：

document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('video_player');
    // 嘗試播放，捕獲 Promise 拒絕以避免控制台報錯
    video.play().catch(err => {
        console.log('自動播放被阻止，需使用者互動:', err);
        // 此處可顯示「點擊播放」提示遮罩
    });
});

常見坑點與對策

1. 忘記 playsinline：缺少此屬性，iOS 會強制全螢幕播放。
2. 未靜音就嘗試自動播放：會被瀏覽器直接阻擋，必須加 muted。
3. M3U8 連結失效或跨域限制：確認伺服器設定 Access-Control-Allow-Origin，且連結可在 Safari 直接開啟測試。
4. 編碼格式不支援：H.264 視訊 + AAC 音訊是最相容組合。

總結

只要在 <video> 標籤加上 playsinline、muted 並確保串流來源正確，即可在 iOS 上實現網頁內嵌、非全螢幕的 M3U8 直接播放。若需有聲自動播放，仍需引導使用者進行首次點擊互動。