web-dev-qa-db-ja.com

一部のWebサイトはiOSSafariでどのようにビデオをインラインで再生しますか？

すべてのビデオが通常のサファリでフルスクリーンで再生されるように拡張されたと思ったので、かなり信じられないほどです。たとえば、これを確認してください。

https://entertainment.theonion.com/the-onion-reviews-rogue-one-1819596116

そのビデオはインラインで再生され、Safariのタブを切り替えても停止しません。そこで何が起こっているのですか？彼らはビデオか何かをレンダリングするためにjsとHTML5キャンバスを使用していますか？どうやって音をうまく同期させるのですか？

ioshtmlvideosafari
8
Gregory Magarshak

コメントに投稿された link @ offbeatmammalに基づいて回答を作成するだけです。

また、 iosの新しいビデオポリシー に基づいています。

IPhoneでは、要素をインラインで再生できるようになり、再生の開始時に自動的にフルスクリーンモードになりません。 Playsinline属性のない要素は、iPhoneで再生するために引き続きフルスクリーンモードを必要とします。ピンチジェスチャでフルスクリーンを終了すると、playsinlineのない要素は引き続きインラインで再生されます。

Playsinline属性に関する注意：

この属性は最近HTML仕様に追加され、WebKitは従来のwebkit-playsinline属性のプレフィックスを解除することでこの新しい属性を採用しました。このレガシー属性はiPhoneOS4.0以降サポートされており、更新されたプレフィックス解除ポリシーに従って、webkit-playsinlineのプレフィックスを解除できることを嬉しく思います。残念ながら、この変更はiOS 10 DeveloperのカットオフにはなりませんでしたSeed 2. iOS Developer Seed）でこの新しいポリシーを試してみたい場合2、プレフィックス付き属性は機能しますが、将来のシードでサポートが利用可能になったときに、プレフィックスなし属性に移行することをお勧めします。

最後に例：

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

ビデオエラーで画像を表示するフォールバック付き

function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}
11
Alan DeLonga