Angular directive to create html 5 video player

Question

Hello Guys i need to create html5 video player with custom host and path best will be with angular directive i try to to with this code:

//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();
                    }
                };
            }
        ]);

What im doing worng my directive its not working :( how to fix or write new one

Stepan Suvorov · Accepted Answer · 2016-02-09 09:51:58Z

1

We not to reinvent the wheel and use ready solution? - for example http://www.videogular.com/

answered Feb 9, 2016 at 9:51

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5887606 Over a year ago

im trying to learn Angular and in our project better solution will be to write own directive

Wtower · Accepted Answer · 2016-02-09 09:55:33Z

0

This is how I do it:

The directive:

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

File video.html, where item comes from the controller:

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

Reference: Angular directives

answered Feb 9, 2016 at 9:55

Wtower

20.1k12 gold badges110 silver badges86 bronze badges

2 Comments

user5887606 Over a year ago

the problem is video resources came from API with json via service

Wtower Over a year ago

Why is this a problem? You deal with that in your controller and implement the appropriate logic within your template.

Collectives™ on Stack Overflow

Angular directive to create html 5 video player

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related