Javascript VideoJS播放器没有'；t使用AngularJS在iPad上玩

我们最近从纯PHP（Laravel）应用程序切换到AngularJS应用程序。我在MP4文件的两个实例中都使用了VideoJS

PHP版本有效，而现在AngularJS版本无效。HTML5给了我一个错误代码4媒体错误SRC不受支持

这不是一个编码问题，因为我可以在iPad上直接在Chrome和Safari中播放该文件，而且以前基于PHP时也可以使用

我相信这是因为javascript在通过指令加载视频后动态加载视频

这在台式机上运行良好，iPad/iPhone是唯一存在此问题的

我怎么才能让这东西玩起来

HTML

更新1 Videogular是一个极好的解决方案

MediaElement

---

HTML

---

这是一个非常古老的帖子，但是自从九月份以来，我们在视频方面取得了很大的进步，现在我们有了响应模式

---

我还搞乱了video.js，并得出结论，mediaelement是AngularApp的特别选择。因此，我最终创建了一个指令，可用于mediaelement、flowplayer和纯html5。

<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>

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

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

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