媒體控制器
為各種瀏覽器和裝置開發通常會帶來獨特的挑戰。其中最顯著的挑戰之一是確保一致的媒體播放，尤其是在 Apple 的 iOS 裝置上。
iOS 媒體播放限制說明
Apple 的 iOS 為音訊和視訊播放建立了特定規則，以增強使用者體驗並管理數據消耗
- 使用者體驗：iOS 禁止媒體自動播放，以防止意外干擾。這種設計選擇可確保使用者不會因突然的音訊而意外中斷，尤其是在安靜的環境中。
- 數據效率：鑑於串流媒體可能非常耗用數據，iOS 要求使用者手動啟動媒體播放。這種設計對使用有限或計量數據方案的使用者特別有利。
破解 iOS 播放挑戰
iOS 挑戰的核心是系統堅持使用者啟動媒體播放。例如，開始播放影片必須直接來自使用者的操作，例如點擊。但是，非同步事件處理常式（例如 onClick$ (QRL)）可能會在使用者的操作和播放命令之間造成斷線。這通常會導致 iOS 在第一次點擊時阻止播放，需要第二次不直观的點擊。
playsinline 屬性
在 iOS 裝置（尤其是 iPhone）上，除非 <video> 標籤上存在 playsinline 屬性，否則影片會自動以全螢幕模式播放。此屬性可確保影片在其指定的容器中播放，從而在不同的裝置和平台上提供一致的體驗。雖然 playsinline 主要針對 iOS，但在其他平台上包含它也是無害的，並且可以確保更廣泛的相容性。
打造通用的播放解決方案
為了在各種瀏覽器和裝置上實現一致的媒體播放，必須採用全面的方法。本指南提供了一個解決方案，可以解決不同平台的細微差別。為確保在使用者互動時立即播放，應同步呼叫 .play() 方法。這可以通過直接在 useVisibleTask$ 函數中附加 click 處理常式來完成。
您將在下方找到一個音訊和視訊控制器的原型，該控制器經過調整，可在多個平台上提供一致的使用者體驗。
與 iOS 裝置相容的通用媒體控制器程式碼如下所示
import {
component$,
useSignal,
useStylesScoped$,
useVisibleTask$,
} from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';
const AUDIO_SRC =
'https://cdn.builder.io/o/assets%2F5b8073f890b043be81574f96cfd1250b%2Fafe011812da146a5b2263196cb25f263?alt=media&token=c017cd87-0598-4af2-8afd-e9b5a3fba078&apiKey=5b8073f890b043be81574f96cfd1250b';
const VIDEO_SRC =
'https://cdn.builder.io/o/assets%2F5b8073f890b043be81574f96cfd1250b%2F8b210c56974440649a0a78d4a3a0ddc5%2Fcompressed?apiKey=5b8073f890b043be81574f96cfd1250b&token=8b210c56974440649a0a78d4a3a0ddc5&alt=media&optimized=true';
export default component$(() => {
const audioElementSignal = useSignal<HTMLAudioElement | undefined>();
const audioPlayButtonSignal = useSignal<HTMLButtonElement | undefined>();
const audioIsPlayingSignal = useSignal(false);
const videoElementSignal = useSignal<HTMLAudioElement | undefined>();
const videoPlayButtonSignal = useSignal<HTMLButtonElement | undefined>();
const videoIsPlayingSignal = useSignal(false);
const playsInlineSignal = useSignal(true);
const location = useLocation();
const videoPoster =
location.url.origin + '/sample-media/qwik-koi-poster.jpg';
useStylesScoped$(`
segment {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding: 20px;
color: #1dacf2
}
.content {
width: 60%;
min-width: 250px;
}
button {
padding: 20px;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #1dacf2;
color: white;
}
.checkbox-container {
display: flex;
align-items: center;
justify-content: center;
}
.checkbox {
width: 20px;
height: 20px;
margin-right: 8px;
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: calc(56.25% + 1px);
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid gray;
}
`);
useVisibleTask$(({ track }) => {
track(() => audioPlayButtonSignal.value);
track(() => audioElementSignal.value);
const play = () =>
audioIsPlayingSignal.value
? audioElementSignal.value?.pause()
: audioElementSignal.value?.play();
audioPlayButtonSignal.value?.removeEventListener('click', play);
audioPlayButtonSignal.value?.addEventListener('click', play);
return () =>
audioPlayButtonSignal.value?.removeEventListener('click', play);
});
useVisibleTask$(({ track }) => {
track(() => videoPlayButtonSignal.value);
track(() => videoElementSignal.value);
const play = () =>
videoIsPlayingSignal.value
? videoElementSignal.value?.pause()
: videoElementSignal.value?.play();
videoPlayButtonSignal.value?.addEventListener('click', play);
return () =>
videoPlayButtonSignal.value?.removeEventListener('click', play);
});
return (
<segment>
<div class="content">
<h1>Media Controller</h1>
<h3>
<i>with iOS Support</i>
</h3>
<br />
<div class="video-container">
<video
ref={videoElementSignal}
src={VIDEO_SRC}
poster={videoPoster}
playsInline={playsInlineSignal.value}
onPlay$={() => (videoIsPlayingSignal.value = true)}
onPause$={() => (videoIsPlayingSignal.value = false)}
onEnded$={() => (videoIsPlayingSignal.value = false)}
/>
</div>
<audio
ref={audioElementSignal}
src={AUDIO_SRC}
onPlay$={() => (audioIsPlayingSignal.value = true)}
onPause$={() => (audioIsPlayingSignal.value = false)}
onEnded$={() => (audioIsPlayingSignal.value = false)}
/>
<br />
<div class="checkbox-container">
<input
type="checkbox"
id="playsInlineCheckbox"
class="checkbox"
checked={playsInlineSignal.value}
onchange$={() => {
videoElementSignal.value?.pause();
playsInlineSignal.value = !playsInlineSignal.value;
}}
/>
<label for="playsInlineCheckbox">playsInline (iOS)</label>
</div>
<br />
<button ref={videoPlayButtonSignal}>
{videoIsPlayingSignal.value ? 'Pause' : 'Play'} Video
</button>
<br />
<br />
<button ref={audioPlayButtonSignal}>
{audioIsPlayingSignal.value ? 'Pause' : 'Play'} Audio
</button>
</div>
</segment>
);
});貢獻者
感謝所有幫助改進此文件的貢獻者！
