MP4 не проигрывается после начальной загрузки в Safari

Question

Я вложил mp4 файл в мою веб-страницу, которая прекрасно загружается и воспроизводится всеми браузерами и на мобильных устройствах.

<video controls src="/mymovie.mp4">
  <track kind="captions"></track>
</video>

Однако, когда я открываю веб-страницув Safari (macOS) единственное, что я вижу, это черный ящик с размером видео и зачеркнутая (отключенная) кнопка воспроизведения перед ним.Дело в том, что когда я снова обновляю страницу (даже без очистки кэша), видео работает нормально.

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

<video controls>
  <track kind="captions"></track>
  <source src="/mymovie.mp4" type="video/mp4"></source>
  not supported
</video>

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

Существует ли какая-либо известная проблема такого рода и способ ее решения?

Вот еще некоторые сведения о моей настройке:

• только HTTPS (действительный сертификат)
• размер видео составляет около 3,5 МБ
• NGINX настроен для отправки этих заголовков:
  • accept-ranges: bytes
  • Content-Range: bytes 262144-3411398/3411399
  • content-type: video/mp4

Что-то, что я замечаю в отличии от Chrome, заключается в том, что внутри моей вкладки сети devtoolsисточник видео загружается от 2 до 4 раз, но только один раз с правильным размером.Две другие записи - это всего лишь несколько байтов.Однако это происходит точно так же, если я сталкиваюсь с черным ящиком.

Answer 1

Если ваше видео находится в той же папке, вы должны использовать:

    <video controls autoplay>
    <source src="mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>

или

    <video controls autoplay>
    <source src="./mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>

Вы также можете включить весь URL:

<video controls autoplay>
    <source src="http://url.to/mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>

Answer 2

<video controls autoplay>
    <source src="/mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
</video>

Вы пытались использовать тег source вместо этого?Атрибут Autoplay также может помочь, но некоторые браузеры не позволяют автоматически воспроизводить видео или автоматически воспроизводить все видео как отключенные, если пользователь сначала не вмешивался в документ .Я думаю, что Safari не позволяет воспроизводить видео без предварительного взаимодействия, и вы обновляете страницу, взаимодействуя со страницей.Вы можете обмануть воспроизведение видео после нажатия на политику конфиденциальности кнопку подтверждения.

// jQuery
$('#button-id').click(function(){ $('#video-id').play(); });

// Javascript
var button = document.getElementById('button-id');
var video = document.getElementById('video-id');
button.addEventListener('click', function(){ video.play(); });