2013-05-09 2 views
1

Я создаю веб-сайт для клиента, который очень тяжелый медиа, поэтому у него много загружаемых видео/аудио файлов. Видео полностью загружаются в Chrome, Firefox, IE и т. Д., Но не в Safari (в Windows)! См. Код ниже.HTML5 Видео не работает в Safari

<video controls="controls" type="video/mp4"> 
    <source src="/malagnini/video/sample.mp4" type="video/mp4" /> 
    <source src="/malagnini/video/sample.ogv" type="video/ogg" /> 
    <source src="/malagnini/video/sample.webm" type="video/webm" /> 
</video> 

Все типы MIME уже добавлены в файл htaccess.

Я использую AJAX для загрузки некоторых видео (например, когда пользователь нажимает кнопку «тип видео»), поэтому я загружаю видео после каждого запроса, который, как я знаю, у Safari есть проблемы с , Но даже до запроса видео не воспроизводятся.

Есть ли какие-либо другие ящики, которые нужно отметить? (У меня установлен QuickTime, который, как мне известно, требуется для запуска HTML5-видео через Safari в Windows).

Кстати, видеоролик DO загружается в iPhone, но загрузка их занимает очень много времени.

+0

Safari в Windows уже почти закончился - даже при установке QT у меня никогда не было особо хорошего опыта. Есть ли у вас какие-либо представления о том, что% возраста ваших пользователей имеет эти комбинации – Offbeatmammal

+0

Нет, у меня нет цифр. Но я решил это сейчас - это была ошибка Safari, при которой новые видео не загружаются, когда src динамически изменяется. Ответ ниже. – FunnyOxymoron

ответ

2

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

Для устранения этого, элемент видео должен быть клонирован, а затем удален. Путь src может быть обновлен до клонированного элемента, перезагружен в DOM и затем загружен как обычно.

+1

У меня такая же проблема с Safari. Не могли бы вы привести пример исправления? – DevDave

0

@FunnyOxymoron Clonning & удаление <video> элементов не является хорошей идеей, потому что на iPhone/IPADS пользователю придется нажать кнопку воспроизведения еще раз, чтобы активировать <video> объект. Правильное решение - заменить атрибут src - и, кстати, он работает и на Safari. См. Пример здесь: https://stackoverflow.com/a/27284512/2079326

Смежные вопросы