Search code examples
html5-videobrowserstack

html 5 video doesn't work only in ipad air 2

I have a website that contains a video. I was testing it on Browserstack, the video works in another browser on different OS example: Windows XP IE, Windows 10 Edge, Ubuntu Firefox, Mac Safari, Android Tab 4 Chrome, Nexus 9 Chrome, iPad Pro 11 Safari, iPhone 6 ). Only iPad air 2 doesn't play the video, I have tried to open youtube and play some videos, it's not working also the page just freeze. I have searched for this, the solution that I found is to encode the mp4 to m4v, but it's not working. the video tag is set to: play, loop, muted. Thanks.

enter image description here 

<video class="video--element"  preload autoplay loop muted ">
     <source src="https://master-7rqtwti65aci36n4zmn2.eu.platform.sh/media/video/e8/96/65/coqon_slider_startseite_action_export.webm" type="video/webm">
     <source src="https://master-7rqtwti-65aci36n4zmn2.eu.platform.sh/media/video/6b/09/76/COQON_HOME.mp4" type="video/mp4">
     <source src="https://master-7rqtwti-65aci36n4zmn2.eu.platform.sh/media/video/f8/29/00/coqon_slider_startseite_action_export.ogv" type="video/ogg">
</video>
Solution

  • So I found the HTML5 video on Wikipedia and there i found the codecs which can help the browser to determine whether it can decode the file. Maybe this helps the ipad to choose which file it should choose.

    So in the end it should look like this:

    <video class="video--element"  controls preload="auto" autoplay loop muted ">
 <source src="https://master-7rqtwti65aci36n4zmn2.eu.platform.sh/media/video/e8/96/65/coqon_slider_startseite_action_export.webm" type='video/webm; codecs="vp8.0, vorbis"'>
 <source src="https://master-7rqtwti-65aci36n4zmn2.eu.platform.sh/media/video/6b/09/76/COQON_HOME.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
 <source src="https://master-7rqtwti-65aci36n4zmn2.eu.platform.sh/media/video/f8/29/00/coqon_slider_startseite_action_export.ogv" type='video/ogg; codecs="theora, vorbis"'>

    I also changed the header the controls. And the syntax of the preload is:

    preload="auto|metadata|none"

    metadata: The author thinks that the browser should load only metadata when the page loads

    auto: The author thinks that the browser should load the entire video when the page loads

    none: The author thinks that the browser should NOT load the video when the page loads

    I found those on here!