web-dev-qa-db-ja.com

AndroidでHTML5 mp4ビデオを自動再生する方法は？

Asp.netでmp4ビデオを再生するモバイルページを開発しました。

IOSはユーザー帯域幅を最小化するために自動再生機能を無効にしていることを知っているので、HTML5 mp4ビデオをAndroid？

私はすでにHTML5コードに自動再生を入れていましたが、機能しません。

以下は私のコードです：

<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>

さらに、ユーザーが画像オーバーレイをクリックするとビデオを再生できるという問題を修正しました。ありがとうカーティ

コードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function() {
    $("#video1").bind("click", function() {
    var vid = $(this).get(0);
    if (vid.paused) { vid.play(); }
    else { vid.pause(); }
    }); 
}); 
</script>

ありがとう

ジョー

androidhtml5html5-video
21
Joe Yan

自動再生はAndroidでは動作しないと思いますが、ビデオを再生するのは面倒です。この記事を読むことをお勧めします： HTML5ビデオをAndroid携帯電話 で動作させる。

5
Ian Devlin

「ミュート」属性と「自動再生」属性を一緒に追加して、Androidデバイスの自動再生を有効にすることができます。

例えば.

<video id="video" class="video" autoplay muted >
30
AngryFridges

次のコードを使用しました。

// get the video
var video = document.querySelector('video');
// use the whole window and a *named function*
window.addEventListener('touchstart', function videoStart() {
  video.play();
  console.log('first touch');
  // remove from the window and call the function we are removing
  this.removeEventListener('touchstart', videoStart);
});

もう自動起動する方法はないようです。

これにより、初めて画面に触れたときにビデオが再生されます。また、最初の実行時に自身を削除するため、複数のリスナーが追加されることを回避できます。

22
james2doyle

Androidには実際にこのためのAPIがあります！メソッドは setMediaPlaybackRequiresUserGesture（） です。私は、ビデオの自動再生について多くのことを掘り下げて、SOから多くのハックを試みた後、それを見つけました。 blair vanderhoof の例を次に示します。

package com.example.myProject;

import Android.os.Bundle;
import org.Apache.cordova.*;
import Android.webkit.WebSettings;

public class myProject extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///Android_asset/www/index.html");

        WebSettings ws = super.appView.getSettings();
        ws.setMediaPlaybackRequiresUserGesture(false);
    }
}
6
brendan

重要な注意：Googleの設定でGoogle Chrome Data Saverが有効になっている場合、自動再生は無効になります。

4
Brendan

自動再生は2回目のみ機能します。 on Android 4.1+では、最初のplay（）を機能させるために何らかの種類のユーザーイベントが必要です。これが発生すると、自動起動が機能します。

これは、ユーザーが帯域幅を使用していることを確認するためです。

これに答える別の質問があります。 Android 4 browser を使用してhtml5ビデオを自動開始

3
Leo

Android 4.4以降では、HTML5 Videoコンポーネントが独自のWebViewに存在する限り、ユーザージェスチャの必要性を削除できます。

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

ビデオを自動再生するには、ビデオ要素に自動再生を追加する必要があります。

<video id='video' controls autoplay>
  <source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>
3
Darren Hicks

kNaitoの答えと同様に、次のことが私のためのトリックを行います

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('player'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}
1
Martin

ビデオを開始するようにJavascriptを単純化しました。

 var bg = document.getElementById ("bg"); 
 function playbg() {
   bg.play(); 
 }
<video id="bg" style="min-width:100%; min-height:100%;"  playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>

*「Files/snow.mp4」は単なるサンプルURLです

0
Walt Peter

mutedタグを追加できます。

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

参照 https://developers.google.com/web/updates/2016/07/autoplay

0
Rajilesh Panoli
<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>
0
Nahid Sheikh

Android 4.1および4.2では、次のコードを使用します。

    evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
    var v = document.getElementById("video");
    v.dispatchEvent(evt);

ここで、htmlは

    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>

これはうまく機能します。しかし、Android 4.4では動作しません。

0
KNaito

これが私のために問題を解決したPhoneGapのプラグインです： https://build.phonegap.com/plugins/1031

Config.xmlに単純に含めました

0
ethanpil