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

MediaElement

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 に答える