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>