iOS Safariでの動画 fullscreen

videojsのプラグインがiphoneで適用されない。

videojsを適用した、動画再生のinlineを表示させたHPで、動画再生をするとき、 iphoneの場合、fullscreenをタップすると、ブラウザのフルスクリーンモードではなく、 ネイティブの動画再生アプリが起動してしまう。

videojsの適用方法

videojsのMarkdown: Qiitaからjsファイル、CSSファイルをダウンロード HTMLのヘッダーにlinkを設定

  <link href="css/video-js.min.css" rel="stylesheet">
  <script src="js/video.js"></script>
  <script src="js/videojs-contrib-media-sources.min.js"></script>
  <script src="js/videojs-contrib-hls.min.js"></script>

Videoタグで適当に動画ファイルを読み込み

<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="hls_sample/hls_400k_.m3u8" type="application/x-mpegURL">
</video>

スクリプトで

var player = videojs("test");

簡単ですね。。。 ただ、iphoneでフルスクリーン表示すると、ネイティブの動画再生アプリが起動してしまいます。

なので、

var player = videojs("test");
player .on('fullscreenchange', function() {
 // なんかの処理
}

でfullscreenになったとき、DOM操作で、疑似的に画面いっぱいに動画を表示できるようにしなければなりません。 対応方法は現在模索中・・・・・

わかり次第記載します。