latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

iOS 10 Safari から video の inline 再生が可能になります

iOS 10 Safari から video のインライン再生が可能になります。

  • iOS 9 までは <video webkit-playsinline> を指定することでインライン再生が可能でした(WebView のみ)
  • iOS 10 からは <video playsinline> を指定することでMobile Safari でもインライン再生が可能になります

ご注意

注意すべき点が1つあり、webkit-playsinline ではなく playsinline を指定してください。 webkit-playsinlineだけを指定するとフルスクリーン再生になってしまいます。

  • webkit-playsinline と playsinline を指定しない → フルスクリーン再生になる
  • webkit-playsinline を指定する → フルスクリーン再生になる
    • iOS 10β3頃まではインライン再生になっていたが、βの途中で仕様変更になった
  • playsinline を指定する → インライン再生になる
  • webkit-playsinline と playsinline を指定する → インライン再生になる

Example

<!DOCTYPE html>
<html><head><title>🍖の日</title>
<meta name="viewport"
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
</head><body>

<video
  src="http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8",
  controls
  playsinline
  style="position:absolute;top:0;left:0;outline:1px solid red;width:320px">
</video>

<p style="position:absolute;top:100px;left:10px;color:lime">
Hello inline player 😀
</p>

</body></html>