CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
user5887606
user5887606

Reputation:

Angular directive to create html 5 video player

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

Upvotes: 0

Views: 776

Answers (2)

Wtower
Wtower

Reputation: 19902

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

Upvotes: 0

Stepan Suvorov
Stepan Suvorov

Reputation: 26196

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

Upvotes: 1

Related Questions