MP4/AVI videos are not playing on safari browser : Django

I create one web application using django 2.1 and python3 and in my requirements is upload video and play video and its absolutely working excellent dynamically and static in all browser except safari browser

I have already tried everything in html tag (video,autoplay,muted,loop playsinline,controls,type=“video/mp4”,codecs=“avc1.4D401E, mp4a.40.2”) etc… everything but still not playing video in safari browser.

my all python logic view + model files code is perfect and working and getting excellent output in all browser except safari browser.

I have already checked all inspect elements and path,all videos path are placed in right place.

enter image description here

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div class="left-video-div">
        <video autoplay muted loop playsinline controls width="320" height="240" class="video-background ">
              <source src="{% static "sample_test01.mp4" %}" type="video/mp4">
        </video>
        <video autoplay muted loop playsinline controls width="320" height="240" class="video-background ">
              <source src="{% static "sample_test02.mp4" %}" type="video/mp4">
        </video>
        <video autoplay muted loop playsinline controls width="320" height="240" class="video-background ">
              <source src="{% static "sample_test03.mp4" %}" type="video/mp4">
        </video>
        <video autoplay muted loop playsinline controls width="320" height="240" class="video-background ">
              <source src="/media/static/clips/userid_420/2019-07-15_182035.991933_Test_Video_02.mp4" type="video/mp4">
        </video>
    </div>
    <p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

I expect the output all static and dynamic video playing in safari browser.

Check whether this works in Safari here

1 Like

@basil.jose i alrredy applied this one but unfortunatly its not work in safari, by the way thank you for responce and issues has been solved i only put (poster="’ + data.clip + '") tag in video tag and issues solved and thumbnil display as 1st frame of video.and i play video via javascript through in other frame there is video tag and video play.

 html += '<video muted class="search-thumbnail-one drag mainplay" width="200" height="120" preload="metadata" poster="' + data.clip + '"> <source src="' + data.clip + '" type="video/mp4"> </video>'