title: Video.js not working in Safari (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)
body: <p>I am trying to use video.js to prevent fast-forward, but allow rewind, for mp4 videos on a Moodle site. It is working properly in Chrome and Opera, but when I try in Safari, I get the following error message:</p>
  
  <pre><code>VIDEOJS: (4)
  "ERROR:"
  "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)"
  "The media could not be loaded, either because the server or network failed or because the format is not supported."
  </code></pre>
  
  <p>I have seen a <a href="https://stackoverflow.com/questions/32866997/html5-video-with-video-js-not-working-in-safari">suggestion</a> to change the Content-Type header to mp4, but for some reason, my <code>iframe</code> doesn't generate a <code>head</code> tag at all (only in Safari; in all other browsers, the <code>iframe</code> contains an <code>html</code> tag with both <code>head</code> and <code>body</code>). Also, it turns out, I am blocked from prepending a <code>head</code> tag to the <code>iframe html</code>. I tried throwing it into a <code>meta</code> tag instead, but this had no impact on the error message</p>
  
  <p>The following is the script I'm using to prevent fast-forward:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet"&gt;
  &lt;script src="https://vjs.zencdn.net/5.0/video.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  window.onload = function() {
    if ($('iframe').length &gt; 0) {
  
      $('iframe').ready(function() {
        if ($('iframe').contents().find('head').length === 0) {
          console.log("*********************");
          console.log("In the if!");
          $('iframe').contents().find('html').prepend("&lt;head&gt;&lt;meta name='viewport' content='width=device-width' content-type='video/mp4'&gt;&lt;/head&gt;");
          $('iframe').contents().find('html').attr("content-type", "video/mp4");
          console.log($('iframe').contents().find('head'));
          console.log($('iframe').contents().find('html'));
        }
  
        var videoPlayer = $('iframe').contents().find('video')[0];
  
        var cssLink = document.createElement("link")
        cssLink.href = "https://vjs.zencdn.net/5.0/video-js.min.css";
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
  
        $('iframe').contents().find('head').append(cssLink);
  
        videojs(videoPlayer, {}, function() {
          var vjsPlayer = this;
          $('iframe').contents().find('video').prop('controls', 'true');
          $('iframe').contents().find('div .vjs-big-play-button').html('');
          $('iframe').contents().find('div .vjs-control-bar').html('');
          $('iframe').contents().find('div .vjs-caption-settings').html('');
  
          var currentTime = 0;
  
          vjsPlayer.on("seeking", function(event) {
            if (currentTime &lt; vjsPlayer.currentTime()) {
              vjsPlayer.currentTime(currentTime);
            }
          });
  
          vjsPlayer.on("seeked", function(event) {
            if (currentTime &lt; vjsPlayer.currentTime()) {
              vjsPlayer.currentTime(currentTime);
            }
          });
  
          setInterval(function() {
            if (!vjsPlayer.paused()) {
              currentTime = vjsPlayer.currentTime();
            }
          }, 1000);
        });
      });
    }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My web server is Apache2.</p>
  
  <p>Any advice on how to enable the Content-Type video/mp4 (or another way to resolve this error) would be greatly appreciated.</p>
  
  <p>I'm also having trouble with the play/pause functions for the video in <a href="https://stackoverflow.com/questions/34864139/video-js-jquery-disrupting-video-play-pause-functions-in-firefox">Firefox</a> and <a href="https://stackoverflow.com/questions/34880021/video-js-jquery-disrupting-video-play-pause-functions-in-microsoft-edge">Microsoft Edge</a>. Please check out those questions if you have any ideas.</p>