0

スライダーの代わりにホームページにビデオを追加しようとしています。

モバイル デバイスが自動再生を無効にする方法と理由を理解しています。

ただし、FacebookHome と Youtube はモバイルで自動再生されます。

https://bg-bg.facebook.com/home

HTML5 メソッドを使用していますが、モバイルで自動再生されません。Facebook Homeを見てみると、コードが似ていてよくわからない。

どんな助けでも大歓迎です。

<video width="100%"  poster="poster.jpg" loop="1" autoplay="1">

 <source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">

</video>
4

1 に答える 1

3

ほとんどのモバイル プラットフォーム (Android、iOS) での自動再生は、ユーザー エクスペリエンスの低下を避けるためにブロックされます。動画は、ユーザー アクションの後にのみ再生する必要があります。通常、別のイベント (onloaded イベントなど) で play() をトリガーすることで回避できます。

Facebook Home は、FireFox Beta でのみ機能するビデオ タイプの拡張機能を提供します.ogv(Google chrome と Android の既定のブラウザーの両方を試しましたが、ポスター画像が表示されるだけです)。

<video poster="Poster.jpg" autoplay="1" loop="1">
<source src="myVideo.mp4">
<source src="myVideo.ogv">
</video>

デモ

event listener別の解決策は、ユーザーがビデオ要素をクリックしたときにビデオが再生されるように追加することです

<video id="myVideo" poster="Poster.jpg">
<source src="myVideo.mp4">
<source src="myVideo.ogv">
</video>

JS:

var video = document.getElementById('myVideo');
video.addEventListener('click',function(){
  video.play();
},false);

デモは Firefox ベータ版 (ウィンドウ内) で動作しますが、Android ブラウザでは Video Player App を呼び出してビデオを再生します

資力：

于 2013-10-01T07:36:50.277 に答える