We recently switched from a straight PHP(Laravel) app to an AngularJS app. I used VideoJS in both instances on an MP4 file.

The PHP version worked and now the AngularJS version doesn't. HTML5 gives me an Error Code 4 MEDIA_ERR_SRC_NOT_SUPPORTED.

This is not an encoding issue because I can play the file directly in Chrome and Safari on an iPad and it worked before when based on PHP.

I believe it's because javascript dynamically loads the video after it's been loaded via the directive.

This works fine in desktop, iPad/iPhone is only one with this problem.

How do I get this thing to play?

HTML

<video
    ui-if='upload.filename'
    class="video-js vjs-default-skin"
    ng-src='{{ main.videoUrl }}{{ upload.filename }}'
    height='400'
    width='100%'
    poster='/image/resize/{{ upload.image }}/400/400'
    videojs
    controls></video>

VideoJS Directive

directives.directive('videojs', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.type = attrs.type || "video/mp4";
            attrs.id = attrs.id || "videojs" + Math.floor(Math.random() * 100);
            attrs.setup = attrs.setup || {};
            var setup = {
                'techOrder': ['html5', 'flash'],
                'controls': true,
                'preload': 'auto',
                'autoplay': false,
                'height': 400,
                'width': "100%",
                'poster': '',
            };

            setup = angular.extend(setup, attrs.setup);
            l(setup)
            element.attr('id', attrs.id);

            var player = videojs(attrs.id, setup, function() {
                this.src({
                    type: attrs.type,
                    src: attrs.src
                });
            });
        }
    };
}]);

Update 1

Videogular is an excellent solution

We recently switched from a straight PHP(Laravel) app to an AngularJS app. I used VideoJS in both instances on an MP4 file.

The PHP version worked and now the AngularJS version doesn't. HTML5 gives me an Error Code 4 MEDIA_ERR_SRC_NOT_SUPPORTED.

This is not an encoding issue because I can play the file directly in Chrome and Safari on an iPad and it worked before when based on PHP.

I believe it's because javascript dynamically loads the video after it's been loaded via the directive.

This works fine in desktop, iPad/iPhone is only one with this problem.

How do I get this thing to play?

HTML

<video
    ui-if='upload.filename'
    class="video-js vjs-default-skin"
    ng-src='{{ main.videoUrl }}{{ upload.filename }}'
    height='400'
    width='100%'
    poster='/image/resize/{{ upload.image }}/400/400'
    videojs
    controls></video>

VideoJS Directive

directives.directive('videojs', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.type = attrs.type || "video/mp4";
            attrs.id = attrs.id || "videojs" + Math.floor(Math.random() * 100);
            attrs.setup = attrs.setup || {};
            var setup = {
                'techOrder': ['html5', 'flash'],
                'controls': true,
                'preload': 'auto',
                'autoplay': false,
                'height': 400,
                'width': "100%",
                'poster': '',
            };

            setup = angular.extend(setup, attrs.setup);
            l(setup)
            element.attr('id', attrs.id);

            var player = videojs(attrs.id, setup, function() {
                this.src({
                    type: attrs.type,
                    src: attrs.src
                });
            });
        }
    };
}]);

Update 1

Videogular is an excellent solution https://github./2fdevs/videogular

• javascript
• html
• ipad
• angularjs
• video

2 Answers 2

MediaElement

http://mediaelementjs./

HTML

<video
    src='{{ main.videoUrl }}{{ upload.filename }}'
    height='400'
    width='100%'
    preload='auto'
    poster='/image/resize/{{ upload.image }}/400/400'
    mediaelement>
</video>

AngularJS Directive

directives.directive('mediaelement', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            attrs.$observe('src', function() {
                element.mediaelementplayer();
            });
        }
    }
});

This is a really old post but since September we have been made a lot of progress in Videogular and now we have responsive mode.

http://www.videogular./