Блог

Главная - Вопросы по программированию - Jwplayer — Ошибка: jwplayer (…).setup не является функцией

Jwplayer — Ошибка: jwplayer (…).setup не является функцией

#angularjs #jwplayer #ng-dialog

#angularjs #jwplayer #ng-диалог

Вопрос:

Я должен показать jwplayer во всплывающем окне, для всплывающих окон я использую ngDialog (angular), код для ngDialog приведен ниже:

 $scope.showVideoPlayerPopup = function(video_path)
{
    $scope.ngDialog = ngDialog;
            ngDialog.open({
                animation: true,
                scope:$scope,
                template:'<div id="video_popup"></div>',
                plain: true,
                //className: 'ngdialog-theme-default',
                closeByDocument: true
                //backdrop : 'static'
            });
        playVideo(video_path);
}

функция воспроизведения видео, вызванная выше, содержит код для jwplayer, который приведен ниже:

 <script>
    function playVideo(video_path)
    {
        jwplayer("video_popup").setup({
            file: video_path,
            width: "600px",
            height: "600px",
            stretching: "bestfit",
        });
    }

</script>

когда я использую тот же код jwplayer для простого HTML-кода, который без всплывающего окна, он работает нормально, но я пытаюсь поместить свой html во всплывающее окно, оно выдает ошибку ниже:

Ошибка: jwplayer (…).setup не является функцией

Обновить

Файлы, которые я включил:

 <script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>

Комментарии:

1. Вы добавили jwplayer.js файл?

Ответ №1:

  1. Убедитесь, что включен jwplayer src (вероятно, вы уже это сделали, но в случае, если нет:)

    Обновление 11/2021

    смотрите Раздел, размещенный в облаке, на странице документации Добавить библиотеку проигрывателя. Для этого потребуется получить учетную запись JWPlayer.

    1. На странице Загрузки плеера и ключей прокрутите вниз до раздела Библиотеки плееров, размещенных в облаке.
    2. В разделе Библиотеки проигрывателей, размещенных в облаке, выберите название проигрывателя из выпадающего меню.
    3. Скопируйте URL библиотеки Cloud Player.
    4. В пределах <head> вашей страницы скопируйте и вставьте URL-адрес в библиотеку проигрывателя. 
       <script src="{cloud_hosted_player_library_url}"></script>
  2. Перед вызовом функции убедитесь, что панель загружена setup . Один из способов сделать это — зарегистрировать прослушиватель событий для ngDialog.opened из ngDialog (см. Раздел События в ngDialog readme): 
     $scope.$on('ngDialog.opened', function (e, $dialog) {
  playVideo();
});

Комментарии:

1. Спасибо @Sam. Сработало отлично. Спас мой день!!

2. Где описываются документы <script type="text/javascript" src="http://p.jwpcdn.com/6/10/jwplayer.js"></script> , это необходимо?

3. @Philll_t Я не могу вспомнить, где я нашел этот URL-адрес, но с тех пор я обновил ответ, чтобы он соответствовал последней документации, поскольку предыдущий URL-адрес, похоже, больше не работал с образцом jsbin.

Ответ №2:

ДА…потому что ваш тег div с идентификатором «current_video_path» должен быть в DOM, прежде чем скрипт jwplayer (…).setup сможет работать…Возможно, вы можете добавить некоторую задержку, используя $timeout или setTimeout, чтобы у него было достаточно времени для отображения div во всплывающем окне, прежде чем этот скрипт сможет сработать..

Комментарии:

1. Как кто-то может определить время задержки, всегда используйте обратный вызов в таких случаях.

2. @Sweety Webashlar: я уже создал <input type=»hidden» id=»current_video_path» value=»> в моем DOM. В любом случае спасибо.

3. ДА… может быть сделано .. я просто хотел, чтобы он понял, что должна быть проблема с синхронизацией… это было только моей главной заботой. и это были варианты, позволяющие быстро проверить, был ли это тот же случай для него или нет..

Метки: