Cordova IOSビデオプレーヤー

Question

RTCMultiConnection経由でwebRTCストリーミングを使用しています。私はcordovaアプリケーションを作成し、ビデオタグのサーバーからblob URLを取得します。アンドロイドとブラウザでうまくいきます。 IOSでは、ビデオは再生されますが、コントロールボタンは機能しません。また、ビデオの位置はアプリケーションで静的です。私はアプリケーションのページを変更しますが、ビデオは常に滞在します。私はページを引くしようとすると、それはここでは次のようになります。

私のHTMLコード：

<video webkit-playsinline playsinline class="screen-video" src="" reload="metadata" autoplay controls></video> 

そして、どのように私はJSに追加：

var videoURL = event.mediaElement.src; 
$('.screen-video').attr('src', videoURL); 

videoURLは次のようなものです：blob : file:///adfsg-123asd1-12asfd3-4fdssdv

編集： 私はブラウザのライブで私のiPhoneのフロントカメラを見ることができます。しかし、私は私のiPhoneで見ることができません。

ビデオプレーヤーが動作しません。

編集2：26.09.2017 mp4ビデオに問題はありません。私はリモートmp4ビデオで試して、それはうまく動作します。

ここはスクリーンショットですが、すべて同じです。異なるsrcのみ。

p.sビッグビデオは常に静的なmp4で、小さなビデオはブロブで、スクロールするとスクロールします。 ：

https://i.imgyukle.com/2017/09/25/kgZev.jpg

https://i.imgyukle.com/2017/09/25/kg4kx.jpg

https://i.imgyukle.com/2017/09/25/kg6a6.jpg

はここ

Answer 1

のiOSは悲しげに埋め込みメディアで素晴らしいプレーしない画像の説明を入力します。このSO answer suggestsとして

：コントロールのために

動画は、常にフルスクリーンで遊ぶように、残された空間は、すべてのクリックやタッチイベントをキャプチャします。代わりにカスタムUIを使用して手動でビデオを、-10に固定された位置-10とトリガー「遊び」 -

この問題を回避するには、width & height 1/1次元動画のタグを設定することができ、上記示唆しました。

注Apple's Dev Siteから、次の情報：

小さな画面

の最適化は、現在、Safariがフルスクリーンを使用してビデオを再生することにより、iPhoneまたはiPod touch上の小さな画面 のためのビデオプレゼンテーションを最適化-video 画面がタッチされたときにコントロールが表示され、ビデオは縦または横のモードで画面に合わせて にスケーリングされます。動画はウェブページ内には表示されません。 height属性とwidth属性は、ウェブページに割り当てられた スペースにのみ影響し、controls属性は無視されます。 これは、小さな画面のデバイスでSafariにのみ適用されます。 Mac OSの X、Windows、およびiPadでは、Safariはビデオをインラインで再生し、 ウェブページに埋め込まれています。 iOSの

上

デフォルトの高さと幅、ビデオのネイティブ寸法は映画 メタデータがロードされるまで知られていないので、150×300のデフォルトの高さと幅があればのiOSを実行しているデバイス上の を割り当てられ、高さまたは幅は指定されていません。 現在、デフォルトの高さと幅はムービー が読み込まれると変更されません。したがって、 が割り当てられた領域で再生されるiOS、特にiPadの場合、 のユーザーエクスペリエンスに適した高さと幅を指定する必要があります。

iPhone動画プレースホルダ

プレースホルダは メディアを再生するためのユーザのための方法を提供します。 iOSデバイスが指定されたメディアを再生できない場合は、コントロールを介して 斜めバーが表示され、再生できないことを示します。あなたが代替案を検討するために喜んでいる場合

、this cordova pluginは役に立つかもしれません：

このプラグインを使用すると、iOSとAndroid上でフルスクリーン、 ネイティブプレーヤーでオーディオとビデオのストリーミングすることができます。

基本的な使用法：

var videoUrl = STREAMING_VIDEO_URL; 

    // Just play a video 
    window.plugins.streamingMedia.playVideo(videoUrl);