6

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:

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."

I have seen a suggestion to change the Content-Type header to mp4, but for some reason, my iframe doesn't generate a head tag at all (only in Safari; in all other browsers, the iframe contains an html tag with both head and body). Also, it turns out, I am blocked from prepending a head tag to the iframe html. I tried throwing it into a meta tag instead, but this had no impact on the error message

The following is the script I'm using to prevent fast-forward:

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link href="https://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.0/video.min.js"></script>

<script>
window.onload = function() {
  if ($('iframe').length > 0) {

    $('iframe').ready(function() {
      if ($('iframe').contents().find('head').length === 0) {
        console.log("*********************");
        console.log("In the if!");
        $('iframe').contents().find('html').prepend("<head><meta name='viewport' content='width=device-width' content-type='video/mp4'></head>");
        $('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 < vjsPlayer.currentTime()) {
            vjsPlayer.currentTime(currentTime);
          }
        });

        vjsPlayer.on("seeked", function(event) {
          if (currentTime < vjsPlayer.currentTime()) {
            vjsPlayer.currentTime(currentTime);
          }
        });

        setInterval(function() {
          if (!vjsPlayer.paused()) {
            currentTime = vjsPlayer.currentTime();
          }
        }, 1000);
      });
    });
  }
}

</script>

My web server is Apache2.

Any advice on how to enable the Content-Type video/mp4 (or another way to resolve this error) would be greatly appreciated.

I'm also having trouble with the play/pause functions for the video in Firefox and Microsoft Edge. Please check out those questions if you have any ideas.

Community
  • 1
  • 1
tinezekis
  • 93
  • 2
  • 9
  • 1
    (even after long time, it may help somebody else) If the headers from server come different than the file extension, then the browser may have problems in rendering it. For example, if you want to render a file from http://.../some_name.mp4 and the "Content-Type" header comes "video/mpeg" and not "video/mp4", then the video may be considered corrupted. (happened to me on IE11) – Victor Feb 08 '19 at 15:12

1 Answers1

1

The same error i faced in my application. after few days of research i found that safari can run only the H264 codec format for the videos . and MP3, AAC for the audio.

check the video format and the server response.

for reference: https://docs.videojs.com/tutorial-troubleshooting.html#problems-when-hosting-media

hazan kazim
  • 938
  • 9
  • 11