web-dev-qa-db-ja.com

SafariWebアプリのiPhoneおよびiPodでのHTML5ビデオプレーヤーの動作

IPhoneとiPodでは、YouTubeビデオがWebページに埋め込まれている場合、ユーザーはビデオをタッチするとビデオの再生が開始されます。iOSメディアプレーヤーがスライドインし、ビデオは横向きで全画面再生されます。ビデオの再生が終了すると、iOSメディアプレーヤーがスライドして戻り、ビデオが埋め込まれたWebページが表示されます。

HTML5 <video>タグを使用すると、ユーザーはビデオに触れることができ、ビデオは全画面に「ズーム」され、現在のデバイスの向きに関係なく再生を開始します。ビデオの再生が終了したら、ユーザーは1回タップしてプレーヤーのコントロールを表示し、次に[完了]をタップしてWebページに戻る必要があります。

残念ながら、私のビデオをYouTubeにアップロードすることはこのアプリケーションのオプションではなく、ビデオの再生が終了した後にWebサイトに戻るHTML5ビデオプレーヤーが見つかりません。ビデオプレーヤーがYouTube埋め込みビデオと同じ動作を示すか、ビデオがインラインで再生されることをお勧めします。カスタマイズされたUIWebViewでインラインビデオを強制することは可能ですが、残念ながらそれはオプションではありません（これは、ネイティブアプリではなくWebアプリを対象としているため）。さらに、<video>プロパティwebkit-playsinlineは機能しません。

埋め込まれたYouTubeビデオの動作を複製できるHTML5ビデオプレーヤーはありますか？明らかなJavascriptの回避策がありませんか？ユーザーの操作なしでビデオの再生が終了したことをウィンドウに通知する方法はありますか？

編集：

Janのおかげで、この問題は解決されました。間違い/メモのリストとともに、作業コードが続きます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>scratchpad</title>
</head>
<body>
<video id="video">
    <source src="movie.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false);
</script>
</body>
</html>

私が犯した間違い：
1。 <video>タグにIDを追加するのを忘れました。
2。 webkitSupportsFullscreenのテスト—そのプロパティを「true」としてテストすることはできませんでした。 このフォーラム投稿 のコード内のコメントは、

// note: .webkitSupportsFullscreen is false while the video is loading

しかし、それがtrueを返す条件を作成することはできませんでした。
3。完全に逃した このstackoverflowの投稿 。

iphonehtmlvideowebkitmobile-safari
14
whlteXbread

うーん、自分で試すことはできません...でも、これを見たことはありますか？

http://developer.Apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//Apple_ref/doc/uid/TP40009356

したがって、「webkitEnterFullScreen（）」はあなたの友達かもしれません（ドキュメントには読み取り専用と書かれていますが）：

http://nathanbuskirk.com/?p=1

インラインビデオは、iPad以外のiOSデバイスでは使用できません（これまでのところ）。

とにかく、イベントリスナーを使用してJavascriptでビデオの終わりを検出することができます。

document.getElementById('video').addEventListener('ended',videoEndListener,false);

乾杯、

1月

9
Jan Petzold

Safariのドキュメントから：

「重要：webkitEnterFullscreen（）メソッドは、ボタンのクリックなどのユーザーアクションに応答してのみ呼び出すことができます。たとえば、onload（）イベントに応答してwebkitEnterFullscreen（）を呼び出すことはできません。」

それはあなたのwebkitEnterFullscreenが常に偽である理由を説明するかもしれません。

http://developer.Apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//Apple_ref/doc/uid/TP40009523-CH3-SW1

「終了」イベントを処理するJanのソリューションは、あなたの場合に最適です。

1
aeldron