The latest articles on DEV Community by Tomer Steinfeld (@corevo). https://dev.to/corevo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F202842%2F76f80214-7f39-477c-9f2e-e22bbd15387a.png https://dev.to/corevo en Tomer Steinfeld Wed, 30 Jun 2021 07:36:59 +0000 https://dev.to/corevo/the-weird-case-of-streaming-in-safari-1a3b https://dev.to/corevo/the-weird-case-of-streaming-in-safari-1a3b <p>Last week I had the pleasure of having to write some code in order to get Safari to stream video. There are plenty of other valuable blog posts out there explaining how to do it. But the gist of it is to support the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Range">Range</a> header, and to make sure the <strong>url ends with an extension</strong>.</p> <h2> Returning partial content through HTTP </h2> <p>Basically the <code>Range</code> header is a way for the browser to tell our server how much of a resource it wants. The server in turn responds with status <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206">206 partial content</a>, with more headers telling the browser how much content is left to be consumed.</p> <p>Safari won't render a video unless we support partial content response, in fact we can see that Safari actually tests us.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PDnHJZIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug9w1jch4wpyg8ioix1c.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PDnHJZIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug9w1jch4wpyg8ioix1c.png" alt="Safari network tab"></a><br> You can see that safari splits the request for the video resource into two. The first requests only requests the first 2 bytes, if we fail to respond with 206 Safari will not render the video.</p> <p>Although my server responded correctly, Safari still won't play the video.</p> <h2> Content type and Safari </h2> <p>I couldn't figure out what was wrong. The video was obviously formatted correctly, because when I just link to the file locally it would play. The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a> was correct, so was the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type">type attribute</a>.</p> <p>Then I tried to add a file extension, I was out of ideas, I changed the route from <code>/video</code> to <code>/video.webm</code> and it worked! Apparently Safari checks three things in order to determine the type of a resource to be a video. The type attribute must match the <code>Content-Type</code> header, and the url must end with a matching extension.</p> <h2> Conclusion </h2> <p>Safari doesn't follow the path of other browsers when it comes to streaming videos, in order to get videos to stream on Safari make sure to follow these guidelines</p> <ul> <li>Support 206 partial content</li> <li>Return the correct <code>Content-Type</code> header and <code>type</code> attribute</li> <li>Add a matching file extension to the video <code>src</code> URL</li> </ul> <p>A working WebM example can be found <a href="https://github.com/corevo/safari-video-streaming">here</a>, cheers!</p> safari webdev