Video.js не работает в Safari (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

Я пытаюсь использовать video.js, чтобы предотвратить перемотку вперед, но разрешить перемотку назад для видео mp4 на сайте Moodle. Он работает правильно в Chrome и Opera, но когда я пытаюсь использовать Safari, я получаю следующее сообщение об ошибке:

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

Я видел предложение изменить Content- Введите заголовок в mp4, но по какой-то причине мой iframe вообще не генерирует тег head (только в Safari; во всех других браузерах iframe содержит тег html как с head, так и с body). Кроме того, оказывается, я не могу добавить тег head перед тегом iframe html. Вместо этого я попытался добавить его в тег meta, но это не повлияло на сообщение об ошибке.

Ниже приведен сценарий, который я использую для предотвращения быстрой перемотки вперед:

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

Мой веб-сервер Apache2.

Будем очень признательны за любые советы о том, как включить Content-Type video/mp4 (или другой способ устранения этой ошибки).

У меня также возникают проблемы с функциями воспроизведения/паузы для видео в Firefox и Microsoft Edge. Пожалуйста, ознакомьтесь с этими вопросами, если у вас есть какие-либо идеи.


person tinezekis    schedule 20.01.2016    source источник
comment
(даже по прошествии длительного времени это может помочь кому-то другому) Если заголовки с сервера отличаются от расширения файла, у браузера могут возникнуть проблемы с его отображением. Например, если вы хотите отрендерить файл с http://.../some_name.mp4, а в заголовке Content-Type указано video/mpeg, а не video/mp4, то видео можно считать поврежденным. (случилось со мной в IE11)   -  person Victor    schedule 08.02.2019


Ответы (1)


Та же ошибка, с которой я столкнулся в своем приложении. после нескольких дней исследований я обнаружил, что Safari может работать только с форматом кодека H264 для видео. и MP3, AAC для аудио.

проверьте формат видео и ответ сервера.

для справки: https://docs.videojs.com/tutorial-troubleshooting.html#problems-when-hosting-media

person hazan kazim    schedule 04.08.2020