язык json файл работает с URL-адресом YouTube - PullRequest
Новая
       15

язык json файл работает с URL-адресом YouTube

0 голосов
/ 04 апреля 2020

Я подумываю о том, чтобы разместить на YouTube три версии языковых видеоклипов на разных языках - Engli sh, Традиционный китайский и Упрощенный китайский. 

var arrLang = {
    "ENG": {
        "abc": "ABC Limited",
        "url": "abcDEFghiJK",
        "provider_name": "http://www.youtube.com/embed/"
...
   },
    "CHT": {
        "abc": "ABC有限公司",
        "url": "CDEfgabJK",
        "provider_name": "http://www.youtube.com/embed/"
...
   },
    "CHS": {
        "abc": "ABC有限公司",
        "url": "HijklMNOP",
        "provider_name": "http://www.youtube.com/embed/"
...
    }
};

Я уже закончил веб-страницу с JSON файл, который может интерпретировать эти три различных типа языковых символов, но не знает, как использовать его для трех встроенных видео на YouTube. 

  <script>
var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope, $http) {

  $http.get('data.json').then(function(resource) {
    $scope.videoList = resource.data.items;

      $scope.video = $scope.videoList[0].url
  }).catch(function(err){
    console.log('err',err)
  });
});

myApp.directive('angularYoutube', function($sce) {
  return {
    restrict: 'E',
    scope: {
      video: '='
    },
    replace: true,
    template: '<div style="height:300px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" ng-src="{{url}}" frameborder="1" allowfullscreen></iframe></div>',
    link: function(scope) {
      console.log('here');
      scope.$watch('video', function(newVal) {
        if (newVal) {
          console.log('New video =', newVal)
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
        }
      });
    }
  }
});


  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
         <a class="navbar-brand" href="/">JS</a>

        </div>
      </div>
    </nav>
  </header>

  <div class="container">

    <div ng-controller="mainController">
      <angular-youtube video="video">
      </angular-youtube>
    </div>

  </div>

</body>
...