Как автоматически воспроизвести HTML5 MP4 видео на Android?

Question

Я разработал мобильную страницу 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>

Более того, я исправил проблемутот пользователь, который нажмет на оверлей изображения, может воспроизвести видео.Спасибо 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>

Спасибо

Джо

Answer 1

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

например.

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

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

Кажется, больше нет способа автоматического запуска.

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

Answer 3

У Android действительно есть API для этого! Метод является setMediaPlaybackRequiresUserGesture () . Я нашел это после того, как много копался в автозапуске видео и много попыток взлома со стороны SO. Вот пример из Блэр Вандерхуф :

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

Answer 4

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

Answer 5

Важное примечание. Имейте в виду, что если в настройках Chrome включен Google Chrome Data Saver, автозапуск будет отключен.

Answer 6

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

Answer 7

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

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

Существует еще один вопрос, который отвечает на этот вопрос. Автозапуск HTML5 видео с использованием браузера Android 4

Answer 8

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

Answer 9

Можно добавить 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

Answer 10

Я упростил 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