2

我们最近从一个直接的 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

4

2 回答 2

4

媒体元素

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();
            });
        }
    }
});
于 2013-09-27T03:36:44.543 回答
1

这是一篇很老的帖子，但自 9 月以来，我们在 Videogular 方面取得了很大进展，现在我们有了响应模式。

http://www.videogular.com/

于 2013-12-06T12:12:19.083 回答