В вашем случае результирующий HTML5 с добавленным атрибутом элементов управления будет выглядеть так:

я есть группа видео MP4, которые будут воспроизводиться, когда контейнер завис. Пожалуйста, посмотрите 3 изображения внизу этой страницы для демонстрации:

https://ts133842-container.zoeysite.com/

Это прекрасно работает в Chrome, однако в Safari видео не будет воспроизводиться, и консоль показывает ошибку при зависании.

Необработанный отказ от обещания: [объект DOMError]

Я искал решение, но не смог найти решение. Пожалуйста, смотрите мой код ниже:

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>
jQuery(".video-container").hover(hoverVideo, hideVideo);

function hoverVideo(e) {  
  jQuery('video', this).get(0).play();
  jQuery(this).find('.image-container').css('display', 'none');
}

function hideVideo(e) {
  jQuery('video', this).get(0).currentTime = 0;
  jQuery('video', this).get(0).pause();
  jQuery(this).find('.image-container').css('display', 'block');
}

Кто-нибудь может поделиться какой-либо информацией о том, почему Safari выдает эту ошибку? Заранее большое спасибо.

Изменить: теперь я заметил, что это не работает на iPad или iPhone, так что это не просто проблема Safari для ПК. Я не уверен, почему я не могу найти больше информации об этой ошибке в Интернете, однако.

Ответы на вопрос(1)

Решение Вопроса

ического воспроизведения видео в настоящее время (автоматическое воспроизведение в мобильном видео в настоящее время постоянно меняется, поэтому новые выпуски могут привести к новому поведению).

Webkit.org, на котором построен Safari, рекомендует не предполагать, что какие-либо медиафайлы будут воспроизводиться автоматически, поскольку браузеры часто позволяют пользователям также устанавливать настройки в этой области. Они рекомендуют проверить и, если необходимо, добавить кнопку или какой-либо элемент управления, позволяющий пользователю воспроизводить видео - если вы посмотрите на приведенный ниже пример, вы увидите, что он действительно ищет ошибку, которую вы видите:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

Кроме того, кажется, что на некоторых устройствах Safari не воспроизводит видео (или, точнее, не показывает видео, которое воспроизводит), когда атрибут «control» не включен. Стоит проверить, имеет ли это какое-то значение, хотя вышеупомянутая проверка все еще должна использоваться в качестве меры безопасности, даже если это работает.

В вашем случае результирующий HTML5 с добавленным атрибутом элементов управления будет выглядеть так:

<div class="video-container">
  <video loop muted preload="auto" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

Ваш ответ на вопрос