Блог

Главная - Вопросы по программированию - Angular Js встраивание Youtube не преобразуется в ng-bing-html с помощью ng-sanitize, как решить?

Angular Js встраивание Youtube не преобразуется в ng-bing-html с помощью ng-sanitize, как решить?

#angularjs

#angularjs

Вопрос:

Я пытаюсь отображать видео на Youtube вместе с контентом. Содержимое отображается, однако встроенное видео Youtube — нет. Я читал, что мне нужно добавить youtube в белый список для копирования, но я думаю, что моя настройка нуждается в корректировке. Мой контент проходит через ng-повтор, подобный такому:

ng-bind-html=activity.content

 Here is a song to listen to:
<iframe width="560" height="315" ng-src="https://www.youtube.com/embed/dcdgV0eYLSQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

шаблон выглядит так

 <div class="activity" ng-bind-html="activity.content"></div>

Я попытался установить URL-адрес белого списка в $ sceDelegateProvider, но, кажется, я пропустил один шаг. Как мне убедиться, что youtube принят? В настоящее время это не так.

 app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        '*://www.youtube.com/**'
    ]);
});

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

1. Что именно вы имеете в виду, говоря «содержимое отображается, а встроенное видео Youtube — нет»? Вы получаете какие-либо ошибки в консоли?

2. Тег шаблона содержит как встроенное видео Youtube, так и строку текста. Строка текста отображается, а видео на Youtube — нет.

Ответ №1:

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

 .filter('trustAsResourceUrl', ['$sce', function($sce) {
         return function(val) {
             return $sce.trustAsResourceUrl(val);
         };
}]);

А затем примените его к вашей привязке следующим образом

  <div class="activity">
        <iframe ng-src="{{embed | trustAsResourceUrl}}" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>

Рабочий плунжер