javascriptsafarimp4

Safari fails to load MP4 videos

Latest Safari v11.0 fails to play videos with MP4s which have been set dynamically via JavaScript. But that works fine on Chrome, Edge and FF.

My code sets the src element pointing to a MP4 resource like that:

<video class="replay" autoplay="true" autostart="true" autobuffer="true" playsinline="true" webkit-playsinline="webkit-playsinline" controls="controls" style="" preload="auto" muted="true">
    <source src="https://videomail.io/videomail/11e7-ad5a-4b14b680-a354-934ec5b49c33/preview/type/mp4/x-videomail-site-name/videomail.io/videomail.mp4?1507598907103" type="video/mp4">
</video>

The problem is that Safari highlights this in red under the Network tab:

enter image description here

Under Request & Response (on right) it says it got cancelled. Why?

Plus under Request Headers I see: Range bytes=0-1. Seems weird. Although I curled that resource and looks fine, can be downloaded completely.

Tried many different changes, all fail. Not sure if it's an Nginx issue, a bug in my JS code, or a Safari thing.

It is very easy to reproduce:

  1. In Safari, go to www.videomail.io
  2. Start recording a video
  3. Click on preview and no video comes up (works fine on Chrome)
Solution

  • ---- FINAL SOLUTION ----

    Fixed this myself by using following in the express.js controller code:

      res.sendFile(file, {
    lastModified: false,
    acceptRanges: true,
    cacheControl: false
  }, function (err) {
    if (err && err.code !== 'ECONNRESET') {
      next(err)
    }
  })