リアクション - クリックイベント付きモバイルでの動画再生

Question

私は複数の画像を持つリアクションアプリを持っています。画像をクリックすると、iframe APIを介してYouTube動画が読み込まれるモーダルが開きます。私はビデオのiframe https://www.npmjs.com/package/react-youtube

モーダルをロードするためにこれを使用してい

は条件付きで追加され、状態modalVisibleを使用してDOMに削除されます：真/偽。

{this.state.modalVisible ? <div className="Modal"><YouTube videoId="2g811Eo7K8U" onReady={this._onReady} /></div> : null} 

それはビデオがページの読み込み時に、既に内部でロードされ、その後、必要なときに、モーダルを表示するためにブロックを表示する伝統的なモーダル対に必要がある場合、それはビデオのみをロードしますので、これは素晴らしいです。画像はモーダルを表示し、それを再生し、本質的に自動ビデオを再生するためにevent.target.playVideo();を使用するようにクリックされたとき、私は関数を呼び出すことができ、従来の表示/非表示プリロードモーダルとなるモバイル動画上しかし

は（ https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations）を自動再生することはできません。

_onReady(event) { 
    // access to player in all event handlers via event.target 
    event.target.playVideo(); 
} 

ロードする方法はあります：私はイメージがビデオをクリックしたときに、モーダルに最初のビデオをロードすることによってそれを行うときにはevent.target.playVideo();ビデオがロードされた後onready機能に呼び出されたときに動作しません。動画をクリックしてから、クリックイベントが発生する前に動画を読み込まずに自動再生しますか？

Answer 1

いいえ、実際のユーザーのクリックなしでビデオを開始する方法はありません（プログラムでクリックをトリガーすると、ブラウザは実際のユーザーの操作ではないことを理解します）。

ユーザーが画像をクリックしたときに動画を開始するには、iframeがDOMに既に存在している必要があります。