title: Can't play mp4 video in Safari served by nodejs server
body: <p>I'm having a problem loading mp4 video files on Safari being served from my nodejs server. The problem does not exist on Chrome. </p>
  
  <p>To illustrate the problem, I have a simple html webpage which reads an mp4 file <code>mov_bbb.mp4</code> served from w3schools. I then download the same file and serve it from my nodejs server. </p>
  
  <p><code>vid1</code> (served from w3schools) loads fine on both Chrome and Safari.</p>
  
  <p><code>vid2</code> (served from my nodejs server) load fine on Chrome but not on Safari.</p>
  
  <p>Here's a screenshot of what I see in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/le9n6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/le9n6.png" alt="enter image description here"></a></p>
  
  <p>Here's a screenshot of what I see in Safari:</p>
  
  <p><a href="https://i.stack.imgur.com/SCKrd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SCKrd.png" alt="enter image description here"></a></p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;video id="vid1" controls preload="auto" src="https://www.w3schools.com/html/mov_bbb.mp4"&gt;&lt;/video&gt;
      &lt;video id="vid2" controls preload="auto" src="http://localhost:8125/mov_bbb.mp4"&gt;&lt;/video&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my nodejs server:</p>
  
  <pre><code>var http = require('http');
  var fs = require('fs');
  var path = require('path');
  
  http.createServer(function (request, response) {
      console.log('request starting...');
  
      var filePath = '.' + request.url;
      if (filePath == './')
          filePath = './index.html';
  
      var extname = path.extname(filePath);
      var contentType = 'video/mp4';
  
      fs.readFile(filePath, function(error, content) {
          if (error) {
              if(error.code == 'ENOENT'){
                  fs.readFile('./404.html', function(error, content) {
                      response.writeHead(200, { 'Content-Type': contentType });
                      response.end(content, 'utf-8');
                  });
              }
              else {
                  response.writeHead(500);
                  response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                  response.end();
              }
          }
          else {
              response.writeHead(200, {
              });
              response.end(content, 'utf-8');
          }
      });
  
  }).listen(8125);
  console.log('Server running at http://127.0.0.1:8125/');
  </code></pre>
  
  <p>Any suggestions would be much appreciated.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Revised nodejs code. Still same issue on Safari though:</p>
  
  <pre><code>var http = require('http');
  var fs = require('fs');
  
  http.createServer(function (request, response) {
    console.log('request starting...');
  
    var filePath = '.' + request.url;
    if (filePath == './') {
      var contentType = 'text/html';
      filePath = './index.html';
    } else {
      var contentType = 'video/mp4';
    }
  
    var rstream = fs.createReadStream(filePath);
    rstream.on('error', function(error) {
      response.writeHead(404);
      response.end();
    });
    rstream.on('open', function () {
      response.writeHead(200, {
        'Content-Type': contentType,
      });
    });
    rstream.pipe(response);
  }).listen(8125);
  console.log('Server running at http://127.0.0.1:8125/');
  </code></pre>
  
  <p>Also chrome inspector for http headers:</p>
  
  <p><a href="https://i.stack.imgur.com/HdKYd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HdKYd.png" alt="enter image description here"></a></p>