Как автовоспроизвести HTML5 mp4-видео на Android?

Я разработал мобильную страницу asp.net для воспроизведения видео mp4.

Я знаю, что iOS отключила функцию автовоспроизведения, чтобы свести к минимуму пропускную способность пользователя, поэтому как я могу автовоспроизведение HTML5 mp4 видео на Android?

Я уже поставил autoplay в 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>

Кроме того, я исправил проблему, которую пользователь нажимает на наложение изображений, может воспроизводить видео. Спасибо Karthi

вот код:

<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>

Спасибо

Джо

Ответ 1

Я не думаю, что автовоспроизведение работает на Android, но получение видео для воспроизведения может быть раздражающе сложным. Я предлагаю прочитать эту статью: Создание HTML5-видео на телефонах Android.

Ответ 2

Я использовал следующий код:

// 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);
});

Кажется, что нет способа автозапуска.

Это делает так, что в первый раз они касаются экрана, на котором будет воспроизводиться видео. Он также удалит себя при первом запуске, чтобы вы могли избежать добавления нескольких слушателей.

Ответ 3

Вы можете добавить атрибуты "отключен" и "автовоспроизведение", чтобы включить автовоспроизведение для устройств Android.

например.

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

Ответ 4

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);
    }
}

Ответ 5

В 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>

Ответ 6

Автовоспроизведение работает только во второй раз. на android 4.1+ у вас должно быть какое-то пользовательское событие, чтобы первая игра() работала. Как только это произошло, автозапуск работает.

Это значит, что пользователь подтверждает, что использует полосу пропускания.

На этот вопрос отвечает другой вопрос. Автозапуск html5-видео с помощью браузера Android 4

Ответ 7

похож на ответ 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");
  }
}

Ответ 8

В 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 это не работает.

Ответ 9

Вот плагин для PhoneGap, который решил проблему для меня: https://build.phonegap.com/plugins/1031

Я просто включил его в свой файл config.xml

Ответ 10

<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>

Ответ 11

Chrome отключил его. https://bugs.chromium.org/p/chromium/issues/detail?id=159336 Даже jQuery play() заблокирован. Они хотят, чтобы пользователь инициировал его, чтобы можно было сохранить полосу пропускания.