title: Video-stream not working for iOS/Safari
body: <p>I have a web-application that relies on a third-party object-store (SoftLayer) to serve video-files. When a user requests a video, my node.js-server fetches the file from the object-store and streams it to the client. I have code that works for browsers in Android &amp; Firefox and Chrome on a desktop machine. Unfortunately, the video is not played in Safari/iOS.</p>
  
  <p>A simplified version of the node.js-code (that streams a video from the w3c-website) looks like this:</p>
  
  <pre><code>router.get('/testFile', function (req, res) {
    var range = req.headers.range;
    var positions = range.replace(/bytes=/, "").split("-");
    var start = parseInt(positions[0], 10);
  
    var objectPath = "http://www.w3schools.com/html/mov_bbb.mp4"
      request.get({
        url: objectPath,
        headers: {},
        encoding: null
      }, function (err, data) {
        if (err) {
          console.log('error', err);
        }else {
          var total = data.body.length;
          var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
          var chunksize = (end - start) + 1;
          console.log("bytes " + start + "-" + end + "/" + total);
          res.writeHead(206, {
            "Content-Range": "bytes " + start + "-" + end + "/" + total,
            "Accept-Ranges" : "bytes",
            "Content-Length": chunksize
          });
          var bodyStream = new streambuffers.ReadableStreamBuffer({
            frequency: 1,
            chunksize: 256
          });
          bodyStream.pipe(res);
          bodyStream.put(data.body);
        }
      });
  });
  </code></pre>
  
  <p>The '/testFile' is then used as the src of a HTML5 video player:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Movie&lt;/title&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Test video&lt;/h1&gt;
      &lt;video controls="true" preload="none"&gt;
        &lt;source src="/testFile" type="video/mp4"/&gt;
      &lt;/video&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This simple project can be checked out here: <a href="https://bitbucket.org/Duffman/stream-video" rel="nofollow">https://bitbucket.org/Duffman/stream-video</a></p>
  
  <p>To run it, just run "node bin/www" and surf to "<a href="http://localhost:3000/testVideo" rel="nofollow">http://localhost:3000/testVideo</a>".</p>