CODEWITHSUNDEEP
iphoneasp.net-mvchtmlvideosafari
Ghufran Essa
Ghufran Essa

Reputation: 1

Solution for HTML5 Video not working in Safari , iPhone and iPad with player video-js

While I am working in web App with ASP.NET MVC , I just noticed that videos on my site are playing in Chrome , IE, Mozilla at Desktop and Android Mobiles , But it was not working at Safari iphone .. So I searched to find a solution and with some help finally I solved this problem and here are the steps:

**By using player Video-js (https://github.com/videojs/video.js/#quick-start )

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet" />

<!--Videojs-->
<div class="wrapper">
    <div class="videocontent">
        <video id="myvideo"
               class="video-js vjs-big-play-centered vjs-16-9"
               controls
               preload="auto"
               poster="~/Content/images/poster.png"
               width="640"
               height="500"
               data-setup='{}'>


     <source src="video.mp4" type="video/mp4" loop autoplay controls="true" />  
     <source src="video.webm" type="video/webm" loop autoplay controls="true" /> 
     <source src="video.ogv" type="video/ogg" loop autoplay controls="true" />  


        </video>
    </div>
</div>

<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<script type="text/javascript">

var video = videojs('myvideo');

document.getElementById('action').onclick = function () {
    video.play();
}

</script>

** after I added this player some of videos played fine at all devices even Safari and others videos with Error : no compatible resources or check your server .. After many searched and tried many suggestion , the reason was found (The codec of videos must be H264 with type .mp4 ) , so I toke one of these Videos that not played cause of Error no comp… ,and with a converter program I converted it to H264 .mp4 then uploaded it again and worked , that is it … I hope that help many programmers person With Thanks more resources: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

Upvotes: 0

Views: 6513

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239200

The only thing that could logically be a problem is if the videos are not encoded properly. In particular with both Safari and Mobile Safari, only H.264 encoded MP4 video is supported. MP4 is the container and can technically be used for other types of encoded video, which most likely has happened here.

Also, you need to be aware of encoding profile and level. Not all H.264 profiles are supported for all devices. You should be safe with one of Baseline, Normal, or High. High has the best compression to quality ratio of those three, so that's your best bet. The level is even more finicky. While more modern devices will support 4.2 or higher, 4.1 still enjoys the broadest support.

So specifically, your video needs to be an MP4, encoded with H.264 High 4.1.

Upvotes: 3

Related Questions