メディアコントローラー
多様なブラウザやデバイスに対応する開発では、独自の課題が頻繁に発生します。最も顕著な課題の1つは、特にAppleのiOSデバイスでの一貫したメディア再生を確保することです。
iOSメディア再生の制限について
AppleのiOSは、ユーザーエクスペリエンスの向上とデータ消費量の管理のために、オーディオとビデオの再生に関する特定のルールを設けています。
- ユーザーエクスペリエンス: iOSでは、予期せぬ中断を防ぐために、メディアの自動再生を禁止しています。この設計により、特に静かな環境で、突然のオーディオによってユーザーが予期せず中断されることがなくなります。
- データ効率: ストリーミングメディアはデータ消費量が多い可能性があるため、iOSではユーザーが手動でメディア再生を開始する必要があります。この設計は、データプランが制限されているユーザーにとって特に役立ちます。
iOS再生の課題を解き明かす
iOSの課題の中心は、システムがユーザーによるメディア再生の開始を要求することです。たとえば、ビデオの再生開始は、タップなどのユーザー操作から直接行われる必要があります。しかし、onClick$（QRL）などの非同期イベントハンドラーでは、ユーザー操作と再生コマンドの間にずれが生じることがあります。これにより、iOSが最初のタップで再生をブロックし、直感に反する2回目のタップが必要になることがよくあります。
playsinline属性
iOSデバイス、特にiPhoneでは、<video>タグにplaysinline属性がない限り、ビデオは自動的に全画面モードで再生されます。この属性により、ビデオは指定されたコンテナ内で再生され、さまざまなデバイスやプラットフォームで一貫したエクスペリエンスが提供されます。主にiOS向けですが、他のプラットフォームでもplaysinlineを含めても問題なく、より幅広い互換性が確保されます。
普遍的な再生ソリューションの作成
さまざまなブラウザやデバイスで一貫したメディア再生を実現するには、包括的なアプローチが不可欠です。このガイドでは、さまざまなプラットフォームのニュアンスに対処するソリューションを紹介します。ユーザー操作時にすぐに再生を開始するには、.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>
);
});貢献者
このドキュメントの改善にご協力いただいたすべての貢献者にお礼申し上げます！
