web-dev-qa-db-ja.com

iPhoneとiPad /ブラウザのHTML5インラインビデオ

IPadとブラウザーで完全に機能するHTML5ビデオプレーヤー（非常にシンプル）を作成しました。

ただし、iPhoneで開くと、再生ボタンが表示されるだけです。このボタンを押すと、すべてのものの上にある新しいウィンドウでネイティブビデオプレーヤーが開きます。

これは、ビデオが孤立して実行されているため、カスタムコントロールとタイムトラッキング（Javascriptで記述）にアクセスできなくなることを意味します。

IPhoneでHTML5ビデオのAppleの制御をオーバーライドし、iPadのように動作させる方法はありますか？

乾杯

iphoneipadvideohtml5
77
Andre

右、

私はこれでどこにも行かず、Appleにバグを提出しました。

数週間後、彼らは私に、「webkit-playsinline」をHTMLのビデオタグに追加し、UIWebViewの「allowsInlineMediaPlayback」プロパティを追加する必要があると言ってきました。

したがって、最終的には次のようになります。

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

そして、すべてがうまく動作します:)

実質的に文書化されておらず、「webkit-playsinline」への参照を見つけることができる唯一の場所は、「iAds JSのみ」と書かれているiAds参照にあるためです。

104
Andre

IOS Safariがインラインビデオサポートを実装するまで、ビデオデコーダーをWebサポート言語で記述する必要があります。 Broadway H.264（video）の場合 jsmpeg mpeg1の場合 ogv.js （videoおよびサウンドのサポート）。

ビデオをデコードするプロセスは計算量が多いことに注意してください。比較的遅いFPS（±20）が予想されます。

参考までに、これらのユーザーは、iOSデバイスで再生できるビデオの デモを準備済み を持っています。

11
Gajus

IOS 10以降

Appleは、iOS 10のすべてのブラウザーで属性playsinlineを有効にしたため、これはシームレスに機能します。

_<video src="file.mp4" playsinline>
_

IOS 8およびiOS 9

実際に.play() 'ingする代わりに、ビデオをskimmingで再生をシミュレートすることで、この問題を回避できます。

iphone-inline-video を使用して、再生とオーディオ同期（存在する場合）を処理でき、_<video>_が正常に機能し続けます。

2
fregante

IOS 10では、「playsinline」属性をHTML5ビデオタグに追加しても、「controls」属性を追加するまで、iPhone UIWebviewでのフルスクリーン再生が妨げられませんでした。これは私がそれを機能させた方法です：

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

もちろん、_webView.allowsInlineMediaPlayback=YES;もViewControllerで。

1
saswanb

アプリを作成していますか、それともモバイルサファリ向けですか？アプリがあり、UIWebViewを使用する場合は、UIWebViewのallowInlineMediaPlaybackプロパティを設定する必要があります。

1
LarsJK

Config.xmlに次を追加するだけです：<preference name="AllowInlineMediaPlayback" value="true" />それ以外の場合、UIWebViewはwebkit-playsinline属性を無視します。

0
Paradise

いくつかの回避策がありますが、私はこの機能を自動的に許可するライブラリに取り組んでいます。ただし、Appleがsafariを

webview.allowsInlineMediaPlayback = YES;

その後、同じ動作のためにハックを使用する必要があります。

ここでプロジェクトをチェックアウトできます。 https://github.com/newshorts/InlineVideo ニーズに合っているかどうかを確認します。

0
newshorts