javascript - VideoJS 播放器无法在 iPad 上使用 AngularJS 播放

Question

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

PHP 版本有效，现在 AngularJS 版本无效。 HTML5 给我一个错误代码 4 MEDIA_ERR_SRC_NOT_SUPPORTED。

这不是编码问题，因为我可以直接在 iPad 上的 Chrome 和 Safari 中播放该文件，并且它以前基于 PHP 时有效。

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

这在桌面上工作正常，iPad/iPhone 是唯一有这个问题的。

如何让这个东西播放？

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

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

更新1

Videogular 是一个出色的解决方案 https://github.com/2fdevs/videogular

Answer 1

媒体元素

http://mediaelementjs.com/

---

HTML

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

AngularJS 指令

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