web-dev-qa-db-ja.com

Ionic 3-iOS 10のネイティブプレーヤーでフルスクリーンでインラインビデオが開きます

ionic 3モバイルアプリ内でビデオをインラインで再生しようとしています-ネイティブビデオプレーヤーの起動を避けたいです。

IPhone 5s-iOS 10でテストしています。

これは私が読んだすべてに従ってビデオをロードするために作成した関数です：

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');
    video.setAttribute('src', src);

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.load();
}

ロードが完了したら、video.play（）で再生します。

この関数の別のバージョンは次のとおりです。

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');

    var srcElement: HTMLSourceElement = document.createElement('source');

    srcElement.setAttribute('src', src);
    srcElement.setAttribute('type', 'video/mp4');

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.appendChild(srcElement);
    video.load();
}

これは、video要素のsource属性の代わりにsource要素を使用します。

Angularがこれを処理するフードの下にいくつかのコードを持っている場合に備えて、HTMLで直接ビデオタグを書いてみました：

<video playsinline webkit-playsinline autoplay muted">
    <source src="test.mp4" type="video/mp4">
</video>

自動再生はミュートされていないビデオではサポートされていないため、HTMLを介してミュート属性も追加しようとしました。 JavaScriptで追加する場合、属性として追加しても効果がないようですが、代わりにvideo.muted = trueと記述しています。

私が試したもう1つのことは、自動再生ではなく、ユーザー操作でミュートされたビデオを再生することでした。

window.addEventListener('pointerdown', () => video.play());

私はまた、iOS 8および9でのiOS 10の再生を模倣することになっているこのポリフィルを使用しようとしました：

enableInlineVideo(video, false);

https://github.com/bfred-it/iphone-inline-video

私が試したものはすべて同じ結果になります-iOSでは、ビデオはインラインで再生されるはずですが、ネイティブプレーヤーでフルスクリーンで再生され、Androidでは期待どおりにインラインで再生されます。

javascriptiosangularcordovaionic-framework
13
Royi Bernthal

config.xmlで次のことを試しましたか？

<preference name="AllowInlineMediaPlayback" value="true" />

ネイティブアプリをインラインで再生するトリガー。 HTML5にアクセスしているときに Apple Developer Site で述べられた興味深い事実があります

小さな画面のデバイスであるiPhoneおよびiPod touchでは、「ビデオはWebページ内に表示されません」

28
Webruster

実際には2つのことを行い、iPhoneで機能します。

これをconfig.xmlに追加します

<preference name="AllowInlineMediaPlayback" value="true" />

そしてHTMLにはwebkit-playsinlineを含める必要があります

<video webkit-playsinline playsinline autoplay muted loop><source src='vid/vid.mp4' type='video/mp4'></video>

複製

Phonegap iOS HTML5ビデオがプレーヤーを開く

@ a432511へのクレジット

0
Himalaya Ahuja