HTML 5 Элементы управления видео тегами не работают в Safari и Firefox

Question

Попытка получить этот код для управления функциями в Safari и Firefox. Элементы управления отображаются просто не реагировать. Код работает отлично в Chrome.

<span class="device image fit"><section id="video"> 
    <video src="images/Compassionate%20Release%20Healthcare%20Network.mp4" width="100%" controls="true">  
    </video> 
</span> 

Спасибо,

Answer 1

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

Вам необходимо предоставить другой формат фильма и создать резервные копии для мобильных устройств или других браузеров.

Попробуйте написать свой <video> элемент, как это:

<video controls> 
    <source src="somevideo.webm" type="video/webm"> 
    <source src="somevideo.mov" type="video/mov"> 
    <source src="somevideo.mp4" type="video/mp4"> 
    I'm sorry; your browser doesn't support HTML5 video 
</video> 

Это будет поддерживаться большинством настольных и мобильных браузеров.

• .mov - поддерживается Safari, iOS Safari.
• .mp4 - поддерживается Chrome, Android Chrome и Android Browser, IE.
• .webm - поддерживается Firefox, Chrome и IE.

Для дальнейшего ознакомления ознакомьтесь со статьей this.

Answer 2

Код не совпадает с тегом section. Это может отбросить парсер в некоторых браузерах.

Просто добавьте один или удалить существующий открывающий тег:

<span class="device image fit"> 
    <section id="video"> 
    <video src="..." width="100%" controls="true">  
    </video> 
    </section> <!-- add this --> 
</span>