1

フラッシュ フォールバックを含むこのビデオ タグがあります。

<video id="myvideo" width="480" height="224" autoplay preload="auto" loop poster="intro6.jpg">
<source src="intro6.mp4" type="video/mp4">
<source src="intro6.webm" type="video/webm">
<source src="intro6.ogv" type="video/ogg">
<object width="480" height="224" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="autostart=true&amp;controlbar=hide&amp;image=intro6.jpg&amp;file=intro6.mp4&amp;repeat=always" />
<img src="intro6.jpg" width="480" height="224" />
</object>
</video>

ご覧のとおり、コントロールはありません。自動再生されるループ ビデオです。これは、デスクトップ ブラウザーではうまく機能しますが、Android や iOS ではあまり機能しません。したがって、自動再生またはループしないため、Androidでコントロールを表示する必要があります。iOSでは、自動再生しないビデオが必要です。

JavaScriptでこれを達成する方法はありますか？そして、私はJavaScriptをあまり知らないことに注意してください。

ありがとう！

4

1 に答える 1

3

おそらく最も簡単で実用的な方法は、ユーザーエージェントをチェックしてAndroidを使用しているかどうかを確認することです。

if (navigator.userAgent.indexOf('Android') >=0) {
   document.getElementById('myvideo').controls = true;
}

一般に、ユーザーエージェントのスニッフィングは「嫌われている」。Androidブラウザの将来のバージョンでは自動再生がサポートされる可能性があるため、通常は機能検出を使用するのが最適です。しかし、モバイルブラウザは通常、ビデオ/オーディオ仕様をサポートしていない場合に通知するのが得意ではありません。

これを行う別の方法は、イベントをチェックすることです。loadstartFF / Chrome / IE9 +ではprogress、イベントは、、、、などの一連のイベントを発生durationchangeさせplayますplaying。Androidブラウザー（少なくとも、私が持っている古いバージョン）では、ビデオは代わりにstalledイベントを発生させます。コントロールを探してstalled有効にすることができます。'play'イベントを取得したら、それらを再度削除できます。

var video = document.getElementById('myvideo'), started = false;
if (video && video.addEventListener) { //in case of IE < 9
    video.addEventListener('stalled', function() {
        if (!started) video.controls = true;
    }, false);
    video.addEventListener('play', function() {
        started = true;
        video.controls = false;
    }, false);
}

ただし、インターネット接続が遅いなど、そのイベントが発生する理由は他にもあります。そのため、ビデオが開始されるまで、デスクトップブラウザで少しの間コントロールが表示されるリスクがあります。

iOSについて心配する必要はありません。必要な場合でも、自動再生されません。

于 2013-01-11T02:23:18.330 に答える