MP4 Video не воспроизводится на мобильных устройствах и Chrome? - PullRequest
Новая
       24

MP4 Video не воспроизводится на мобильных устройствах и Chrome?

1 голос
/ 03 июня 2019

Ниже код воспроизводит файл .mp4 (кодек: H.264, AAC, Kind: MPEG-4 фильм, созданный с помощью QuickTime), просто отлично в браузере Safari на рабочем столе: 

<video poster="video poster link" controls="controls" width="270" height="490"> <source src="video link" type="video/mp4"></video>

Однако, когдапри попытке запустить браузер Safari на iPhone / iPad, после нажатия кнопки воспроизведения ничего не происходит.Кроме того, браузер Chrome не воспроизводит видео, а кнопка воспроизведения по центру не отображается.

Сайт - это сайт WordPress и онлайн.

Спасибо за вашу помощь.

РЕДАКТИРОВАТЬ:

Я пытался ее решитьдобавив muted autoplay playsinline loop, но, похоже, ни один из них не работает, кроме рабочего стола Safari.

Я преобразовал файл .mp4 в .webm и .ogv и не работал.

В браузере Chrome элементы управлениякажется серым / отключено, видео не загружается.Плакат видим.

На мобильных устройствах Chrome / Safari управляет взаимодействием, но видео не воспроизводится.

Мне не нужно, чтобы это видео воспроизводилось автоматически или загружалось предварительно.Мне просто нужно, чтобы он воспроизводился при нажатии play.Очень просто.

Ответы [ 3 ]

3 голосов
/ 05 июня 2019 

<video id="my_video" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video

Кажется, хорошо код. Вы можете проверить, может ли браузер воспроизводить этот формат. 

<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<script> 
function supportType(e,vidType,codType) { 
  var vid = document.createElement('video');
  isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
  if (isSupp == "") {
    isSupp = "No";
  }
  e.target.parentNode.innerHTML = "Answer: " + isSupp;
} 
</script>
2 голосов
/ 06 июня 2019

Оказывается, проблема не в коде, а в том, какой пользовательский HTML-виджет я использовал в конструкторе веб-сайтов.

Я использовал тему Astra в WordPress, при добавлении пользовательского HTML-виджета в макет я использовал HTML-виджет WordPress вместо HTML-виджета Astra. Каким-то образом тема блокировала виджет WordPress.

Я собираюсь оставить этот ответ здесь на случай, если кто-то в будущем может столкнуться с той же проблемой.

0 голосов
/ 03 июня 2019 

<video class="embed-responsive-item" width="320" height="240" autoplay loop>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  <source src="https://www.w3schools.com/html/movie.webm" type="video/webm">
</video>
...