2016-02-09 2 views
0

Привет, ребята, мне нужно создать html5 видео плеер с настраиваемыми хоста и путь лучше всего будет с угловой директивы я стараюсь, чтобы с помощью этого кода:Угловая директива для создания HTML 5 видеоплеер

//HTML 
    <video-resource></video-resource> 
//JS  
    app.directive('videoResource', ['apiUrl', 
      function() { 
       var host = apiUrl.url; 
       return { 
        restrict : 'C', 
        link: function (scope, element, attrs) { 
         function render() { 
          var path = attrs.path; 
          var source1, source2, source3; 
          var type1 = 'type="application/octet-stream"'; 
          var type2 = 'type="video/webm"'; 
          var type3 = 'type="video/ogg"'; 
          path = host + path; 
          var dot = path.lastIndexOf('.'); 
          var ext = path.substr(dot + 1); 
          switch (ext) { 
           case 'mov': 
            source1 = path; 
            source2 = path.substr(0, dot) + '.webm'; 
            source3 = path.substr(0, dot) + '.ogv'; 
            break; 
           case 'webm': 
            source1 = path.substr(0, dot) + '.mov'; 
            source2 = path; 
            source3 = path.substr(0, dot) + '.ogv'; 
            break; 
           case 'ogv': 
            source2 = path.substr(0, dot) + '.webm'; 
            source1 = path.substr(0, dot) + '.mov'; 
            source3 = path; 
            break; 
           default: 
          } 

          var html = '<video id="myvideo" autoplay="" class="video-player" controls="controls" preload="auto" width="100%">'+ 
          '<source src="'+source1+'" '+type1+'>'+ 
          '<source src="'+source2+'" '+type2+'>'+ 
          '<source src="'+source3+'" '+type3+'>'+ 
          '</video>'; 
         } 

         render(); 
        } 
       }; 
      } 
     ]); 

Что им делать worng ? моя директива ее не работает :(как исправить или написать новый один

ответ

0

Это, как я это делаю:

директива:

myApp.directive('myVideo', function() { 
    return { 
     templateUrl: 'video.html' 
    }; 
}); 

Файл video.html, где item приходит от контроллера:

<video preload="auto" autoplay> 
    <source data-ng-repeat="source in item.node.video_set" 
      data-ng-attr-src="{{ source.get_video }}" 
      src=""/> 
</video> 

Ссылка: Angular directives

+0

проблема заключается в видео ресурсах, полученных из API с помощью json через службу –

+0

Почему это проблема? Вы имеете дело с этим в своем контроллере и реализуете соответствующую логику в своем шаблоне. – Wtower

1

Мы не изобретать велосипед и использовать готовое решение - например http://www.videogular.com/

+1

им пытаются узнать Угловое и в нашем проекте лучшим решением будет написать собственная директива –

Смежные вопросы