Angular.js: لا يعمل ngSrc بشكل صحيح مع علامة مصدر فيديو HTML5

لدي مشكلة أيضًا ، ومع ذلك أشعر أن المشكلة تكمن في Angulars ng-تكرار.
إذا قمت بإزالة الفيديو من هذا النطاق ، فسيتم تشغيله بشكل جيد ، وإلا فلن يتم تحميل أي من عناصر التحكم.

أنا أيضا! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

أنا أيضا.

أنا أيضا! ساعدني

+1

أنا أستخدم ng-تكرار لتعيين مصادر ng-src ويتم تحميلها بشكل صحيح عند تحميل الصفحة ، ولكن إذا تم إخفاء الفيديو عبر ng-show ثم عرضه مرة أخرى ، فلن يتم إعادة تحميل المصادر (في Chrome).

يمكنني تأكيد ملاحظة sourcec0de - إذا قمت بإزالة تكرار ng واستخدمت مصدر ng-src واحد (أو عدة مصادر ng-src) ، يتم إعادة تحميل الفيديو بشكل صحيح عند إعادة العرض.

انا لدى نفس المشكله. هل هناك من يبحث في هذا حاليا؟

مع أو بدون ng-src ، مع أو بدون ng-repeat ، يفشل Chrome بشكل متكرر في إعادة تحميل فيديو HTML5 بعد الانتقال بعيدًا ثم العودة إلى الصفحة.

من ذاكرة تخزين مؤقت نظيفة ، أرى طلبين (الأول Pending ) ، والثاني بـ 206 Partial Content . إذا قمت بالتحديث ، أرى طلبًا واحدًا 304 Not Modified . عندما أتنقل بعيدًا عن عرض الفيديو ثم أعود (إما من خلال رابط أو باستخدام زر الرجوع) ، أحصل على طلبين للفيديو بحالة Pending . سيحتوي أحدهما على نوع Mime video/mp4 (صحيح) ، والآخر يقول فقط Pending .

هل هناك من ينظر حتى في هذه القضية ؟؟؟

هل يمكنك تقديم مثال جار على هذه المشكلة؟
هل يعمل على بعض المتصفحات على الإطلاق؟
هل تحققت مما إذا كانت المتصفحات تدعم تغيير السمة src على عناصر فيديو HTML5 بعد العرض؟

عذرًا ، لم يتم نشر التطبيق النموذجي بعد.
يعمل بشكل جيد في Safari.
كما هو موضح أعلاه ، لقد استخدمت كلاً من توجيه ng-src وسمة src المشفرة مع نفس النتائج.

ماذا يحدث إذا قمت بتغيير src باستخدام jQuery مستقيم؟
أتساءل عما إذا كان هذا في الواقع خطأ في المتصفح وليس AngularJS؟

في 16 يوليو 2013 ، الساعة 22:31 ، كتب Paul Grenier [email protected] :

عذرًا ، لم يتم نشر التطبيق النموذجي بعد.
يعمل بشكل جيد في Safari.
كما هو موضح أعلاه ، استخدمت كلاً من التوجيه ng-src و src المشفرة
السمة مع نفس النتائج.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1352#issuecomment -21075654
.

حتى إذا لم أقم بتغيير src (على سبيل المثال ، الكود الثابت لخاصية src للفيديو) ، فإن المشكلة تحدث. ليس لدي طريقة لمحاكاة المشكلة بعيدًا عن Angular لأن Angular يتحكم في المحتوى. أوافق على أنه قد يكون مجرد مشكلة في Chrome ولكني لست متأكدًا من كيفية اختبار ذلك.

ماذا تعني أن Angular يتحكم في المحتوى؟

تحدث المشكلة عندما يتغير المحتوى ، باستخدام وحدة تحكم Angular ، وتحميل عرض آخر. يؤدي استخدام زر الرجوع أو رابط إلى المسار السابق إلى عرض المحتوى السابق ولكن يفشل تحميل الفيديو - في كل مرة. إذا كانت مشكلة Angular ، فمن المحتمل أن تكون في Chrome فقط. أعتقد أن التخزين المؤقت القوي في Chrome وطريقة Angular لتغيير طرق العرض لا يمكن أن تتفق على ما يجب تحميله.

AutoSponge كانت حالة الاختبار الخاصة بي:
الصفحة 1 مع زر للانتقال إلى الصفحة 2
الصفحة 2 مع مشغل videojs وزر للعودة إلى الصفحة 1

انتقل إلى الصفحة 1 ، ثم إلى الصفحة 2 ، يتم تحميل الفيديو بشكل صحيح.
انقر فوق الزر للعودة إلى الصفحة 1 ، ثم انتقل إلى الصفحة 2 ، يتوقف google chrome باستخدام videojs. يحدث هذا بسبب عدم إزالة كائن videojs عند إزالة الزاوية للعنصر من DOM ، كما هو متوقع. هذا ليس أنجولارجس (ياي!)

قم بإزالته قبل تهيئة مشغل videojs. أفعل هذا لأن لدي توجيهًا يضيف لاعبًا. على سبيل المثال ، إذا تم استخدامه في توجيه:

... directive('mydir', ... {
    var vp;
    return {
        link: ..{ 
            if (vp) vp.dispose();
            vp = videojs("mp4video");
        }
    };`

تمامًا مثل OP ، لا أستخدم كائنًا مجمّعًا. يتم تحميل الفيديو من خلال علامة فيديو HTML5. هل تقترح أنه يجب إزالته بشكل منفصل؟

حسنًا ، يتتبع videoJS اللاعبين الذين تمت إضافتهم إلى DOM ولكن يبدو أنه لا يشاهد التغييرات. إذا قمت بإزالة العنصر من DOM (على سبيل المثال ، لأنك انتقلت إلى مسار آخر) ، فلن يعرف videoJS ولن يقوم بتهيئته مرة أخرى. انظر السطر 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
إذا قمت بإزالته خارج videoJS ، أعتقد أنه يجب عليك استدعاء طريقة التخلص () الخاصة بالمشغل. أعتقد أن هذا يعمل كما لو قمت بلف مكون إضافي jquery (؟). هذا ما يجعلني أعتقد أنها ليست مشكلة زاوية.

تواجه هذه المشاكل أيضًا.
لا يؤدي تحميل ملفات AV إلى src أو ng-src المهمة. تحتاج إلى كتابة توجيهات أو مصانع لكي تعمل.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

أواجه هذه المشكلة أيضًا.

فشل تحميل الفيديو في Chrome و Firefox و Safari. إنه يعمل ، مع ذلك ، في IE.

وإليك عمل حول: HTTP : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

إنه يخلق وميضًا فوضويًا عند تحميل الصفحة ، لكنه يعمل.

+1

الحل هو كما يلي:

في وحدة التحكم الخاصة بك ، قم بتعيين وظيفة في حالتي على النحو التالي:

    $scope.play = function(who) {
        var name = who.id.split('.')[0];
        $scope.audio.mp3 = name + '.mp3';
        $scope.audio.ogg = name + '.ogg';
        $scope.audio.play = 'views/audio.html?'+name;
    };

ثم في حالتي في القالب الخاص بي ، كان لدي ما يلي:

<div ng-include src="audio.play"></div>

يبدو النموذج الخاص بي في views / audio.html كما يلي:

<audio ng-model="audio" controls autoplay >
    <source ng-src="{{audio.mp3}}" type='audio/mp3'></source>
    <source ng-src="{{audio.ogg}}" type='audio/ogg'></source>
</audio>

إذا لم يتغير $ scale.audio.play فلن تحدث إعادة تحميل ، لذلك أنا أستخدم اسم الملف ، فقد يكون هذا مجرد رقم عشوائي بدلاً من ذلك

caitp اعتقدت أن لديك علاقات عامة لهذا ، هل ذاكرتي

IgorMinar كنت سأعمل عليها ، لكنني أدركت أنه لا يمكنني إعادة إنتاج المشكلة (انظر http://jsfiddle.net/J77gE/). اعتقدت أنه سيكون من الممتع إنشاء وحدة مساعدة وسائط بدلاً من ذلك خارج النواة مع المزيد من خيارات الربط.

ولكن بقدر ما أستطيع أن أقول ، يعمل ng-src بشكل جيد مع علامات المصدر في المتصفحات الحديثة والزاوية الحديثة

كانت المشكلة التي ذكرتها على وجه التحديد بسبب تغيير طرق العرض واستخدام زر الرجوع. لست متأكدًا من كيفية محاولة jsfiddle إعادة إنشاء المشكلة.

ليس الأمر كذلك ، فالنقطة هي أنه ليس لدينا مشكلة في إقحام علامات المصدر ، أعتقد أن هذه ليست المشكلة. لم أتمكن من إعادة إظهار مشكلتك الخاصة على الإطلاق

AutoSponge هل يمكنك تقديم تطبيق تجريبي وإرشادات حول كيفية إعادة إنتاج هذا من فضلك؟

http://jsfiddle.net/AutoSponge/Yh9en/

انقر فوق ارتباط الفيديو. سيتم تحميله في المرة الأولى. انقر فوق الصفحة الرئيسية ثم انقر فوق الفيديو مرة أخرى. في غضون نقرة واحدة أو نقرتين ، من المحتمل أن يتوقف التحميل في Chrome.

(ولا تحكم ، لقد جمعت هذا معًا استنادًا إلى تطبيق منذ 8 أشهر!)

AutoSponge هذه ليست مشكلة

أوافق على أنها مشكلة مؤسفة مع Chrome. أعتقد أن هذا هو السبب الرئيسي لبقاء هذه المشكلة مفتوحة لمدة 9 أشهر مع القليل من العمل عليها. نظرًا لأنه من غير المحتمل أن يصلح Chrome ، هل تعتقد أنه من غير المعقول إنشاء خيار لكسر ذاكرة التخزين المؤقت؟ أعتقد أنه سيضيف سلسلة عشوائية إلى src.

اعتقدت أيضًا أنه قد يكون له علاقة بـ pushState - إما التنفيذ في Chrome أو استخدامه في Angular. لكنني اعتقدت بصدق أنه كان من الممكن إصلاحه الآن.

أشعر أن هذه المشكلة بالذات تنتمي على الأرجح إلى أداة تعقب مشكلات الكروم (أعتقد أن هناك بعض المشكلات المتعلقة بذاكرة التخزين المؤقت لـ HTMLMediaElement مفتوحة بالفعل ، لذا من المفيد التحدث عنها هناك).

لا يمكنني التذكر ، لكن من المحتمل أن يكون هذا هو السلوك المتوقع المحدد في المواصفات (ولن تكون هذه هي المرة الأولى التي تطلب فيها المواصفات سلوكيات غريبة / مؤسفة)

قد يكون هذا منفصلاً عن المشكلة التي أواجهها ، ولكن لدي مشكلة حيث

أتمنى أن يكون هذا واضحًا إلى حد ما ومتعلق!

اكتشفت للتو بعض الحلول. إنه يعمل مع Chrome ، ولكن ليس مع متصفحات أخرى (في بعض الحالات ، مرة بعد مرة ، وما إلى ذلك) :)
آخر تعليق في
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

كملاحظة أخرى ، تشير مواصفات HTML5 إلى أن تعديل سمة src الديناميكي لملفلن يكون للعلامة أي تأثير ، ولكن القيام بالشيء نفسه على سمة src لملف

بعد قليل من البحث في googling ، وجدت أن هذا على الأرجح مرتبط بالكروم الذي ينتظر المقابس المتاحة التي لا تعمل بشكل زاوية ، وأن إضافة التحميل المسبق = "لا شيء" إلى علامة الفيديو يبدو أنه يحل المشكلة.

الحل

في وحدة تحكم

$scope.mp3 = "http://download.jw.org/audio.mp3"

$scope.$watch('mp3', function() {
       $("audio").attr("src",$scope.mp3)
   });

لغة البرمجة:

<audio id="mejs" type="audio/mp3" controls="controls"></audio>

agliottone يستخدم الحل البديل المقترح ممارسات سيئة. يجب ألا تكتب أبدًا إلى DOM من وحدة تحكم كهذه. ضع في اعتبارك استخدام توجيه مخصص.

btford 1 أوافق ولكن ..
كرس آخر الأشرار أنتم نهايات العلاج

+1

أعتقد أنه في كل مرة يتم فيها تعيين مصدر جديد ، يجب عليك استدعاء .load() على عنصر الفيديو الأصلي مرة أخرى لإظهار مصدر الفيديو الجديد.

مرحبًا ، لدي مشكلة مع angularJS على Google Chrome عندما أقوم بتحميل الصفحة في المرة الأولى التي يتم فيها تحميل فيديو HTML 5 ولكن عندما أقوم بتغيير العرض باستخدام ng-view ، لا يتم تحميله ولكن في متصفح Firefox وهو متصفح إنترنت يعمل بشكل جيد للغاية.

لا أعرف ماذا علي أن أفعل حيال ذلك!

تبدو هذه مشكلة مشابهة لـ <embed> و ngSrc . انظر # 339

يجب إصلاح هذا الأمر :(

لقد كتبت بلنكر
انقر فوق الفيديو ، يتم تحميل الفيديو. انقر فوق ارتباط آخر ثم العودة إلى الفيديو. الفيديو معلق. يمكنك مشاهدة الطلبات في chrome network . طلبان ، واحد هو السابق ، لا يزال يحصل. آخر واحد جديد ، معلق.

kaiqigong لقد عملت الأسبوع الماضي من خلال تعيين عنوان URL على أنه موثوق به للفيديو نظرًا لأن الفيديو لم يكن محليًا على موقع الويب.

http://plnkr.co/edit/CL0Lh6VGMy0M3mR1SvVA؟p=preview

قمت بتقسيم plnkr الخاص بك وقمت بتعديله لتعيين عنوان URL والثقة به:

   .controller('VideoController', function($scope, $sce, $routeParams){
        $scope.name = "VideoController";
        $scope.params = {
          videoUrl: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.mp4")
        };
   })

هناك تأخير في الفيديو لكنه يعمل معي.

@ فيليب هايدون شكرا لردك.
لقد جربت PLNKR الخاص بك ، لكنه لا يزال لا يعمل بشكل صحيح. (حاول التبديل بسرعة بين الروابط.)
ما وجدته هو ، عندما نزيل علامة الفيديو (عن طريق تغيير المسار أو بعض عمليات DOM الأخرى) ، لا يزال المتصفح يسحب مصدر الفيديو. عندما نعود إلى الفيديو. يتم إجراء طلب فيديو آخر مما يؤدي إلى ازدحام حركة مرور الشبكة.
إذا قمت بتعيين src للفيديو على '' قبل إزالة علامة الفيديو ، فسيتوقف المتصفح عن السحب ، مما يحل المشكلة. من فضلك جرب هذا الكود: http://codepen.io/cagegong/pen/bJHAz

لذا فإن الحل النهائي:

$scope.$on '$destroy', () ->
  angular.element('video').attr 'src', ''

نعم ، يعمل المنجم ، ليس بنسبة 100٪ ، ليس لدي أي فكرة عن سبب عدم قيام المتصفح بإيقاف الطلب نفسه عندما يتم إتلاف عنصر dom الذي يطلبه. لا أعتقد أن هذا شيء يجب على Angular نفسه التعامل معه.

من المثير للاهتمام أن نرى أن تعيينه على سلسلة فارغة يؤدي إلى إنهاء الطلب ، فقد أضطر إلى إعداد شيء ما لإضافة ذلك في مشروعي. شكرا.

تضمين التغريدة
أتمنى أن يحل هذا مشكلتك

: +1:

واو ، سنتان ولا شيء. هل يتم الحفاظ على الزاوية على الإطلاق؟

Angular لا يستحق الوقت والجهد. لقد قالوا بالفعل "اللعنة عليك" للمجتمع باستخدام Angular 2.0.

IDontEatSoap لست متأكدًا من سبب طرح هذا السؤال ، فقط تحقق من قائمة الالتزامات والإصدارات . بالنظر إلى إصدار جديد كل أسبوع وعدد قليل من الالتزامات _ يوم _ ، بما في ذلك عطلات نهاية الأسبوع ، يبدو أنه تم الحفاظ عليه إلى حد كبير بالنسبة لي ...

@ phillip-haydon ، برجاء الحفاظ على متخصص المحادثة والتركيز على الأمور التقنية ، فأنت تنتهك قواعد السلوك الخاصة بنا

IDontEatSoap @ phillip-haydon إذا كنت مهتمًا حقًا بمعالجة هذه المشكلة ، فإن أفضل طريقة للمضي قدمًا هي إرسال طلب سحب مع تغييرات التعليمات البرمجية التي تجعل المستقبل يعمل في جميع المتصفحات.

ومع ذلك ، لا يتم دعم علامة src الخاصة بالفيديو البسيط؟

لقد تمكنت من تشغيله عن طريق تعريض $ sde واستخدام src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"

لا تفهموني خطأ ، أنا حقًا أحب الزاوية. لكن الأشياء الصغيرة مثل علامات src و SVG للفيديو غير مدعومة وتتطلب حلولاً بديلة أمر غير متوقع.

استمروا في العمل الجيد :): +1:

+1 ، من المستحيل إضافة كاميرا ويب بث مباشر مع بيانات ديناميكية.

@ pkozlowski-opensource لم أعد مهتمًا لأنني لا أهتم ب Angular الآن بعد أن تخلت عن مجتمع V2. هناك 0 نقطة في إضاعة الجهد عليها.

@ phillip-haydon شكرًا لك على هذه المعلومات. كنت أبحث للتو في أطر عمل الواجهة الأمامية لاستخدامها مع node.js. لم أسمع عن قضية V2 من قبل. قررت أنا وفريقي استخدام React.js نظرًا لكيفية كسر التوافق بين V1 و V2. تعتقد أن الصدع الهائل الذي أحدثه هذا النوع من التفكير في مجتمع بايثون كان سيعلم الجميع درسًا.

:خائب الامل:

@ phillip-haydon و StevenDStanton - يؤسفني أن أسمع أنك اخترت استخدام إطار عمل آخر ولكن بالطبع يجب عليك اختيار الأدوات التي تعمل بشكل أفضل

فقط للتوضيح ، لم يتخل AngularJS عن المجتمع ، في الواقع ، شارك المجتمع أكثر من أي وقت مضى في التطوير المستمر لـ Angular 1.x. لقد اقتربنا من إصدار AngularJS 1.4.0 ، والذي سيكون أقصر وقت بين تغييرات الإصدار الكبير حتى الآن ، وكان لديه المزيد من أعضاء المجتمع الذين يعملون في الفريق الأساسي أكثر من أي وقت مضى. بمجرد إصدار هذا الإصدار ، سنبدأ التطوير نحو AngularJS 1.5 ، والذي يجب أن يتم إصداره (مع تساوي كل الأشياء) قبل نهاية عام 2015. تذكر أيضًا أن Google نفسها لديها مئات من الإنتاج تستخدم تطبيقات AngularJS 1.x قيد التشغيل فى الحال. من مصلحة Google ضمان استمرار هذه التطبيقات ، تمامًا مثل تطبيقاتك ، في التمتع بحياة أو مسار ترحيل.

فيما يتعلق بـ Angular 2 - يتم توجيه جهود التطوير هذه بدقة من خلال التعليقات الواردة من المجتمع. الهدف هو توفير إطار عمل أسرع وأصغر وأكثر قوة يكون قادرًا على دعم تطبيقات أكبر وأكثر تعقيدًا ؛ لأداء أفضل على الأجهزة المحمولة ؛ والاستمرار في تبني تطور متصفحات الويب مع دعم شفاف لمكونات الويب.

لتحقيق ذلك ، لم يكن من الممكن الاستمرار في تثبيت الأشياء على AngularJS 1.x ، حيث احتجنا إلى إعادة التفكير في بعض اللبنات الأساسية ، مثل كيفية عمل الحاقن والمجمع. والنتيجة هي إطار عمل جديد تمامًا يستمر في دفع نفس الأهداف عالية المستوى التي جعلت AngularJS مشهورة وموثوقة كما أصبحت ولكن أيضًا قادرة على توفير مسار إثبات مستقبلي لسنوات قادمة.

قد لا يكون هناك حل ترقية جاهز للترحيل من AngularJS 1.x إلى Angular 2 ، وهذا صحيح. ولكن سيكون الترحيل من AngularJS 1.x إلى Angular 2 بالتأكيد أسهل من الترحيل من AngularJS 1.x إلى إطار عمل مختلف تمامًا.

يبدو لي أن المتصفح ليس جيدًا جدًا في مشاهدة عنصر <source> للتغييرات التي تطرأ على سمة src . يمكن حل مشكلة "الملصق الأصلي" باستخدام ng-if .

انظر http://plnkr.co/edit/rpiEg1ki7KXgD40zy8qV

أنا فقط أستخدم

        $timeout(function () {
            $("video source").attr("src", 'https:' + file.url);
            $("video").attr("src", 'https:' + file.url);
        }, 500);

@ طفل را - أعتقد الإصدار الخاص بك يعمل لأن المتصفح لا مشاهدة التغيير إلى src السمة على <video> عنصر كما يمكن أن يرى هنا: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

من مواصفات HTML5: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

لن يكون للتعديل ديناميكيًا لعنصر المصدر وسمته عندما يكون العنصر مدرجًا بالفعل في عنصر فيديو أو صوت أي تأثير. لتغيير ما يتم تشغيله ، ما عليك سوى استخدام السمة src على عنصر الوسائط مباشرةً ، وربما الاستفادة من طريقة canPlayType () للاختيار من بين الموارد المتاحة. بشكل عام ، تعد معالجة عناصر المصدر يدويًا بعد تحليل المستند أسلوبًا معقدًا غير ضروري.

ما يعنيه هذا هو أنه لا يمكنك توقع أن يتعامل المتصفح مع AngularJS (أو أي شيء آخر في هذا الشأن) ويغير عناصر المصدر ديناميكيًا. بدلاً من ذلك ، ما نحتاج إليه هو بعض التوجيهات الخاصة بالوسائط التي ستتعامل مع تحديث خاصية <video> tag's src عند الاقتضاء. ربما شيء ما على غرار مكتبةcaitp 's ng-media .

وفيما يتعلق مشكلة مع طلب شريط فيديو لم يتم إلغاؤها، وأقترح أن نتمكن من تنفيذ شيء من هذا القبيلkaiqigong الصورة الفكرة في https://github.com/angular/angular.js/issues/1352#issuecomment -58865425. ربما يمكننا إضافة توجيه عنصر video يقوم بتعيين src إلى "" عندما يتم تدمير العنصر؟

مكتبات محتملة أخرى يمكن تجربتها:

• فيديو
• فيديو

إلغاء الاشتراك. ترك AngularJS للتفاعل. آسف يا شباب ولكن شكرا لعملكم الشاق.

نعم فكرة جيدة ، أنا ألغي الاشتراك أيضًا. لقد تخلت عن AngularJS من أجل http://aurelia.io/

لذا عد إلى المشكلة الفنية المطروحة:

توجد بالفعل مشكلتان تجري مناقشتهما في هذه المسألة:

• و <video> عنصر لا تراقب ولا تتفاعل مع التغييرات إلى src السمة على <source> العلامات. هذا جزء من مواصفات HTML5 ولذا فمن غير المرجح أن يتغير في المستقبل القريب. هذا يعني أنه لا يمكننا استخدام طريقة AngularJS الاصطلاحية في التحديد الديناميكي لعناصر <source> ، مع أو بدون ngSrc . وبعبارة أخرى، ونحن ببساطة لا يمكن استخدام الاستيفاء في <source> العلامة src السمة لأن <video> سوف عنصر لا تلتقط التغيير.
• في بعض الحالات (المتصفحات) لا يلغي العنصر <video> طلبه لتنزيل مقطع فيديو بشكل صحيح ثم يُزال العنصر من DOM. تأثير ذلك هو أنه إذا غيّر التطبيق DOM بسرعة كافية ، بإضافة وإزالة علامات <video> ، بحيث لا يتوفر الوقت لتنزيل الفيديو ، يمكنك أن تتعثر في موقف حيث <video> يحاول عنصر <video> تم تدميره مسبقًا. يبدو أن المتصفح في الواقع سيلغي طلب الفيديو إذا تم تعيين السمة src (أو currentSrc ؟) على سلسلة فارغة ( "" ) قبل إتلاف العنصر .

لا يمثل أي من هاتين المسألتين خطأ في AngularJS بحد ذاته. لكن هذا لا يعني أنه لا يمكننا فعل شيء حيال ذلك.

بخصوص المشكلة الأولى:
الطريقة الوحيدة لإصلاح ذلك ، في Angular أو أي إطار عمل آخر ، هي كتابة JavaScript للتعامل مع المصادر المتغيرة ديناميكيًا ، كما هو موضح في مواصفات HTML5. لم أرَ حلاً لهذا في أيٍّ من الأطر الرئيسية الأخرى ، لكن الطريقة الأكثر جاذبية في AngularJS هي بناء مجموعة من التوجيهات. هذا ما حاول الأشخاص في المشاريع التالية القيام به بشكل فعال:

• ميديا
• فيديو
• فيديو

اعتمادًا على اهتمام المجتمع ، يمكننا النظر في تطوير شيء مشابه لهذا لـ Angular 1.5 وحزمه كوحدة خاصة به (على غرار كيفية تعبئة ngCookies ). دعنا نعيد النظر في هذا عند القيام بالتخطيط 1.5. في غضون ذلك ، فإن أفضل حل هو تنفيذ إحدى المكتبات المذكورة أعلاه ومساعدتهم على جعل مكتبتهم تعمل من أجلك.

بخصوص المشكلة الثانية:
لا يبدو أنني قادر على إعادة إنتاج هذا شخصيًا في الوقت الحالي. في Chrome الخاص بي ، يستمر بالفعل في دفق فيديو عناصر <video> حتى بعد أن نتلف العنصر ، والذي بعد بعض التبديل ذهابًا وإيابًا ينتج عنه العديد من الطلبات التي تعمل بالتوازي ، ولكن لا يبدو أن هذه الطلبات منع تحميل فيديو العنصر <video> الجديد.

هنا ، يمكنك مشاهدة تنزيلات الفيديو المتعددة في وقت واحد.

أعتقد أن هذا خطأ في المتصفح حقًا ، ولكن في هذه الأثناء ، يمكنك حل هذه المشكلة من خلال تقديم التوجيه video الخاص بك (راجع http://plnkr.co/edit/QLMJd24rxvklr638e57Q؟p=preview) :

  .directive('video', function() {
    return {
      restrict: 'E',
      link: function(scope, element) {
        scope.$on('$destroy', function() {
          element.prop('src', '');
        });
      }
    };
  })

هنا ، يمكنك أن ترى أن تنزيل الفيديو يتوقف الآن عندما ننتقل بعيدًا عن عرض الفيديو.

في الوقت الحالي ، هذا هو الحل الموصى به لهذه المشكلة.

petebacondarwin ... بالنظر إلى مواصفات w3c ، يبدو أن إحباط وكيل المستخدم في المستند سيؤدي إلى إحباط تحميل التدفق أيضًا. أدى استدعاء window.stop() إلغاء أي بث إضافي للشبكة بالنسبة لي.

في النهاية ، ليس هذا هو الشيء الأكثر مثالية إذا كنت تريد موارد أخرى ، ولكنه يوفر مستوى معينًا من الحل البديل.

daleyjem شكرا لهذه الفكرة.
لا يمكننا القيام بذلك في التوجيه الأساسي لأنه يمنع مقاطع الفيديو الأخرى من البث.

فقط قم بإنشاء عامل تصفية:
app.filter ("trustUrl"، ['$ sce'، الوظيفة ($ sce) {
عودة وظيفة (تسجيل Url) {
إرجاع $ sce.trustAsResourceUrl (registrationUrl) ؛
} ؛
}]) ؛

في عرض الملف:
<audio src = "{{Your_URL | trustUrl}}" عناصر تحكم مشغل الصوت> الصوت>

ملاحظة: اهتم بالمساحة في العلامة الصوتية

مرحبًا ، أنا مبتكر Videogular.

كما أوضح petebacondarwin ، هذه ليست مشكلة في AngularJS ولكنها في الغالب مشكلة تتعلق بكيفية عمل الفيديو على HTML5 وكيفية تعامل المتصفحات مع طلبات الفيديو. ويصبح الأمر أكثر غرابة عندما تحتاج إلى تشغيله على الأجهزة المحمولة.

لقد حاربت كثيرًا مع الفيديو و HTML5 باستخدام Videogular ويجب أن أقول إنه من الصعب جعلها تعمل بسلاسة عبر جميع المتصفحات ، ولكن ليس مستحيلًا.

لذا ، إذا أراد أي شخص في فريق AngularJS المساعدة في هذا الأمر ، فسيسعدني مشاركة معرفتي المتواضعة حول هذا الأمر والمساهمة في إصلاحه. هذا شيء يزعجني حقًا وفي Angular 2 لا أواجه مشاكل مع هذا ، لذا سيكون من الرائع أن يكون لديك نهج مماثل في كلا الإطارين.

+1

إذا كان لديك توجيه في مشغل الفيديو ، فيمكنك مشاهدة متغير src url وتحديثه يدويًا:

link: function (scope, element, attrs) {
    var video = element.find('video')[0];
    scope.$watch('source.url', function (val) {
        video.src = val;
    });
}

بعد الكثير من التجربة والخطأ ، تمكنت أخيرًا من تشغيل الفيديو بشكل موثوق على Android 4.2.2 و 4.3 و 4.4.4 و 5.0.0 و 5.1.0. قم بتثبيت Crosswalk واستخدام Videogular

تم إصلاحه بتوجيه مخصص

<source ng-repeat="source in sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>


//Html5 video fix
eshop.directive('html5vfix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            attr.$set('src', attr.vsrc);
        }
    }
});

أقوم بتحليل فيديو url في db مع json ، لكن لا يعمل (((الرجاء المساعدة

عندما أقوم بالنقر فوق زر التشغيل الخاص بي ، يتم عرض الفيديو رأسًا على عقب وعند الضغط على ملء الشاشة ، يتم الوصول إلى موضعه أي اقتراح لهذه المشكلة

+1 لا يوجد تحليل لعنوان url سواء كان ذلك باستخدام src أو ngSrc.
هل تم التخلي عن هذا الخطأ؟

أواجه هذه المشكلة نفسها هل كان هناك حل حتى الآن

هذه الحلول تعمل بشكل جيد جدا.

http://www.rubencanton.com/blog/2014/07/adding-video-src-with-angular.html