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