Safari Browsers not loading videos or audio with wav file type

Question

I have been digging into a bug with our website where videos and wav type audio files are not loading/showing up when viewed through the Safari browser.

Instead it just displays the media player with no image and a spinning wheel icon next to the play button until clicked when the the time icon will change from '--:--' to '-00:00'. MP3 files however will load but the media player (instead of showing a time) displays 'Live Broadcast' next to the play button.

Our html is essentially:

<video width="500" height="500" controls autoplay>
   <source src='/path/to/route?param1=...'/>
</video>

or for audio:

<audio preload='auto' controls='controls' autoplay='autoplay'>
   <source src='/path/to/route?param1=...' type='audio/type' />
</audio>

and our controller method like:

@GetMapping("/route")
fun doGet(@RequestParam(name = "param1") param1: String,
          ...,
          request: HttpServletRequest,
          response: HttpServletResponse) {

   //validate and pull audio/video files based on params and session
   ...
   // set response headers
   response.contentType = ...//get type of media
   var contentLength = ...//get length of all files you will be returning
   response.setContentLength(contentLength)
   response.setHeader("Content-Range", String.format("bytes 0-%d/%d", contentLength - 1, 
      contentLength))
   // Output Media
   response.outputStream.use { out ->
      mediaList.map { it.mediaData }
      .forEach { mediaBytes ->
         try {
            out.write(mediaBytes)
            out.flush()
          } catch (e: Exception) {
            log.error(e.message, e)
          }
       }
   }
}

I saw other answers that content-range: was a required header for wav on safari unlike other browsers so I added that to no avail. In fact when looking at Safari's dev window and viewing the network window, it says that there are no headers attached to the request to get the media file, or the response.

Is anyone familiar with why there would be no headers on the request and/or how to get video and wav files playing on Safari? No errors are being thrown in the logs or the console.

After more testing I am wondering if it is how we are returning the media files that Safari does not like.

Answer 1

After much digging and adding many different headers and such to the response we figured out a solution and I thought I would post it for any others encountering this issue:

Instead of returning the files before like:

response.outputStream.use { out ->
  mediaList.map { it.mediaData }
  .forEach { mediaBytes ->
     try {
        out.write(mediaBytes)
        out.flush()
      } catch (e: Exception) {
        log.error(e.message, e)
      }
   }}

return them as such:

return ResponseEntity.ok().contentType(MediaUtils.getMediaType(mediaType, mediaName)).body(byteArrayResource)

where the media type would be based on the file(s) we were returning. Apart from pulling the files from their locations nothing else was needed. Hope this helps anyone who encounteres this issue.