Angular.js: ngSrc HTML5 वीडियो स्रोत टैग के साथ ठीक से काम नहीं करता है

Im एक समस्या के रूप में अच्छी तरह से कर रहा है, लेकिन मुझे लगता है कि मुद्दा Angulars एनजी-रिपीट में रहता है।
अगर मैं उस दायरे से वीडियो हटाता हूं तो यह ठीक चलता है, अन्यथा कोई भी नियंत्रण लोड नहीं होगा।

मै भी! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

मै भी।

मै भी! मेरी मदद करो

+1

मैं ng-src स्रोतों को सेट करने के लिए ng-repeat का उपयोग कर रहा हूं और वे पेज लोड पर सही ढंग से लोड होते हैं, लेकिन अगर वीडियो ng-show के माध्यम से छिपा हुआ है और फिर फिर से दिखाया गया है तो स्रोत पुनः लोड नहीं करते हैं (क्रोम में)।

मैं sourcec0de के अवलोकन की पुष्टि कर सकता हूं - अगर मैं एनजी-रिपीट को हटाता हूं और वीडियो पर फिर से दिखाने पर एकल एनजी-एसकेटी स्रोत (या कई एनजी-एसकेबी स्रोत) का उपयोग करता है।

मुझे भी यही तकलीफ़ है। क्या वर्तमान में कोई इस पर गौर कर रहा है?

ng-src के साथ या बिना ng-repeat , क्रोम बार-बार एक HTML5 वीडियो को फिर से नेविगेट करने और फिर पृष्ठ पर वापस आने में विफल रहता है।

एक स्वच्छ कैश से, मुझे 2 अनुरोध (पहले एक Pending ) मिलते हैं, दूसरे के साथ 206 Partial Content । यदि मैं ताज़ा करता हूं, तो मुझे 304 Not Modified साथ एक अनुरोध दिखाई देता है। जब मैं वीडियो दृश्य से दूर जाता हूं, तब वापस (या तो लिंक के माध्यम से या बैक बटन का उपयोग करके), मुझे वीडियो के लिए केवल Pending स्थिति के साथ दो अनुरोध मिलते हैं। इनमें से एक में एक माइम-प्रकार video/mp4 (सही) होगा, दूसरा बस Pending कहता है।

क्या कोई इस मुद्दे को देख रहा है ???

क्या आप इस मुद्दे का एक चल उदाहरण प्रदान कर सकते हैं?
क्या यह कुछ ब्राउज़रों पर काम करता है?
क्या आपने जाँच की है कि क्या ब्राउजर HTML5 वीडियो तत्वों पर src विशेषता बदलने का समर्थन करता है

क्षमा करें, उदाहरण एप्लिकेशन अभी तक प्रकाशित नहीं हुआ है।
सफारी में ठीक काम करता है।
जैसा कि ऊपर बताया गया है, मैंने एक ही परिणाम के साथ एनजी-एसकेवी निर्देश और हार्ड-कोडेड एसकेसी विशेषता दोनों का उपयोग किया।

यदि आप सीधे jQuery के साथ src को बदलते हैं तो क्या होता है?
मुझे आश्चर्य है कि क्या यह वास्तव में AngularJS के बजाय ब्राउज़र में एक बग है?

16 जुलाई 2013 22:31 को, पॉल ग्रेनियर नोटिफिकेशन @github.com ने लिखा:

क्षमा करें, उदाहरण एप्लिकेशन अभी तक प्रकाशित नहीं हुआ है।
सफारी में ठीक काम करता है।
जैसा कि ऊपर बताया गया है, मैंने एनजी-एसकेवी निर्देश और हार्ड-कोडेड एसकेसी दोनों का इस्तेमाल किया
एक ही परिणाम के साथ विशेषता।

-
इस ईमेल का उत्तर सीधे दें या Gi tHubhttps: //github.com/angular/angular.js/issues/1352#issuecomment -21075654 पर देखें।
।

यहां तक ​​कि अगर मैं src नहीं बदल रहा हूं (जैसे, हार्ड-कोड वीडियो src विशेषता), तो समस्या होती है। मेरे पास एंगुलर से समस्या को दूर करने का कोई तरीका नहीं है क्योंकि कोणीय सामग्री को नियंत्रित करता है। मैं सहमत हूं, यह क्रोम में बस एक समस्या हो सकती है लेकिन मुझे यकीन नहीं है कि इसे कैसे परीक्षण किया जाए।

आपका क्या मतलब है कि कोणीय सामग्री को नियंत्रित करता है?

समस्या तब होती है, जब कोणीय नियंत्रक का उपयोग करते हुए, सामग्री बदल जाती है, एक और दृश्य लोड हो रहा है। बैक बटन या पिछले रूट के लिंक का उपयोग करने से पूर्व की सामग्री प्रदर्शित होती है लेकिन वीडियो हर बार लोड होने में विफल रहता है। यदि यह एक कोणीय मुद्दा है, तो यह शायद केवल क्रोम में है। मेरा अनुमान है कि विचारों को बदलने के लिए क्रोम की आक्रामक कैशिंग और एंगुलर की विधि इस बात पर सहमत नहीं हो सकती है कि क्या लोड होना चाहिए।

@ मेरा परीक्षण का मामला था:
पेज 2 पर जाने के लिए एक बटन के साथ पेज 1
पेज 2 एक वीडियो प्लेयर और एक बटन के साथ पेज 1 पर वापस जाने के लिए

पृष्ठ 1 पर नेविगेट करें, फिर पृष्ठ 2 पर, वीडियो सही ढंग से लोड किया गया है।
पृष्ठ 1 पर वापस जाने के लिए बटन पर क्लिक करें, फिर पृष्ठ 2 पर जाएं, Google क्रोम वीडियोज का उपयोग करना बंद कर देता है। ऐसा तब होता है क्योंकि वीडियोज ऑब्जेक्ट को तब नहीं हटाया गया जब कोणीय ने DOM से तत्व को हटा दिया था, जैसा कि अपेक्षित था। यह कोणीयज नहीं है (या!)

Videojs प्लेयर को इनिशियलाइज़ करने से पहले इसे हटा दें। मैं ऐसा करता हूं क्योंकि मेरे पास एक निर्देश है जो एक खिलाड़ी को जोड़ता है। उदाहरण के लिए, यदि एक निर्देश में उपयोग किया जाता है:

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

ओपी की तरह, मैं एक आवरण वस्तु का उपयोग नहीं कर रहा हूं। वीडियो को HTML5 वीडियो टैग के माध्यम से लोड किया गया है। क्या आप सुझाव दे रहे हैं कि अलग से हटाया जाना चाहिए?

अच्छी तरह से, वीडियोजेएस डोम में जोड़े गए खिलाड़ियों पर नज़र रखता है लेकिन ऐसा लगता है कि यह बदलाव नहीं देख रहा है। यदि आप DOM से तत्व को हटाते हैं (जैसे कि आप किसी अन्य मार्ग पर नेविगेट करते हैं), तो VideoJS को पता नहीं चलेगा और वह इसे फिर से प्रारंभ नहीं करेगा। पंक्ति 17 देखें: https://github.com/videojs/video.js/blob/master/src/js/core/js
यदि आप इसे वीडियो जेएसएस के बाहर निकालते हैं, तो मुझे लगता है कि आपको खिलाड़ी के निपटान () विधि को कॉल करना चाहिए। मुझे लगता है कि यह काम करता है जब आप एक jquery प्लगइन (?) लपेटते हैं। यह वही है जो मुझे लगता है कि यह एक कोणीय मुद्दा नहीं है।

इस समस्या के होने के साथ-साथ।
AV फ़ाइलों को लोड करना src या ng-src काम नहीं करता है। काम करने के लिए निर्देश या कारखाने लिखने की जरूरत है।
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

मुझे भी यह समस्या हो रही है।

वीडियो क्रोम, फ़ायरफ़ॉक्स और सफारी में लोड करने में विफल रहता है। यह, तथापि, 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>

मेरे दृश्य / ऑडियो में टेम्पलेट निम्नानुसार दिखता है:

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

अगर $ गुंजाइश.audio.play नहीं बदलती है तो कोई पुनः लोड नहीं होगा, इसलिए मैं फ़ाइल के नाम का उपयोग कर रहा हूं, यह सिर्फ एक यादृच्छिक संख्या हो सकती है

@ kitp ने सोचा कि आपके पास इसके लिए एक पीआर था, क्या मेरी स्मृति मुझे विफल कर रही है?

@IgorMinar मैं इस पर काम करने जा रहा था, लेकिन मुझे एहसास हुआ कि मैं समस्या को पुन: उत्पन्न नहीं कर सकता (देखें http://jsfiddle.net/J77gE/)। मुझे लगा कि अधिक बाध्यकारी विकल्पों के साथ कोर के बाहर मीडिया हेल्पर मॉड्यूल बनाने में मज़ा आएगा।

लेकिन जहाँ तक मैं बता सकता हूँ, एनजी- src आधुनिक ब्राउज़रों और आधुनिक कोणीय में स्रोत टैग के लिए ठीक काम करता है

मेरे द्वारा बताई गई समस्या विशेष रूप से विचारों को बदलने और बैक बटन का उपयोग करने के कारण थी। मुझे यकीन नहीं है कि कैसे jsfiddle समस्या को फिर से बनाने का प्रयास करता है।

यह नहीं है, मुद्दा यह है कि हमारे पास स्रोत टैगों को प्रक्षेपित करने वाला मुद्दा नहीं है, मुझे लगता है कि यह मुद्दा नहीं है। मैं आपके विशेष मुद्दे को बिल्कुल भी पुन: पेश नहीं कर पाया हूं

@ ऑटो एक्सपो आप इसे कैसे पुन: पेश करने के लिए एक डेमो ऐप और निर्देश प्रदान कर सकते हैं?

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

वीडियो लिंक पर क्लिक करें। यह पहली बार लोड होगा। होम और फिर वीडियो पर फिर से क्लिक करें। 1 या 2 क्लिक के भीतर यह संभवतः Chrome में लोड करना बंद कर देगा।

(और जज मत करो, मैंने 8 महीने पहले से एक ऐप के आधार पर इसे एक साथ फेंक दिया था!)

@ ऑटो इस एक कोणीय समस्या नहीं है। यह Chrome का एक अजीब व्यवहार है, लेकिन यह अभी भी आपकी स्रोत फ़ाइल को इंटरपोल कर रहा है और सही src प्राप्त कर रहा है। यह कैशिंग के साथ एक मुद्दा लगता है, जो थोड़ा दुर्भाग्यपूर्ण है। (आप इस मुद्दे को ngIf के साथ भी रखते हैं, लेकिन यह ngShow + का उपयोग करके परिवृत्त किया जा सकता है)

मैं मानता हूं कि यह क्रोम के साथ एक दुर्भाग्यपूर्ण मुद्दा है। मुझे लगता है कि यह मुख्य कारण है कि यह मुद्दा 9 महीने तक खुला रहा और इस पर बहुत कम काम हुआ। चूंकि क्रोम इसे ठीक करने की संभावना नहीं है, क्या आपको लगता है कि कैश-बस्टिंग विकल्प बनाना अनुचित है? मुझे लगता है कि यह सिर्फ src के लिए एक यादृच्छिक स्ट्रिंग संलग्न होगा।

मैंने यह भी सोचा कि इसे पुशस्टैट के साथ कुछ करना पड़ सकता है - या तो क्रोम में कार्यान्वयन या इसे कोणीय में उपयोग करना। लेकिन मैंने ईमानदारी से सोचा था कि यह अब तक तय हो चुका होगा।

मुझे ऐसा लगता है कि यह विशेष मुद्दा शायद क्रोमियम इश्यू ट्रैकर पर है (मुझे लगता है कि HTMLMediaElement के कुछ जोड़े हैं जो पहले से ही खुले कैश से संबंधित मुद्दे हैं, इसलिए यह वहां बात करने लायक होगा)।

मैं याद नहीं कर सकता, लेकिन यह संभव है कि यह कल्पना में परिभाषित किया गया व्यवहार है (और यह पहली बार नहीं होगा कि अटकलें अजीब / दुर्भाग्यपूर्ण व्यवहार के लिए पूछी गई हों)

यह मेरे द्वारा किए जा रहे मुद्दे से अलग हो सकता है, लेकिन मेरे पास एक मुद्दा था जहां

आशा है कि कुछ हद तक समझदार और संबंधित था!

बस कुछ वर्कअराउंड का पता चला। यह क्रोम के लिए काम करता है, लेकिन किसी अन्य ब्राउज़र के लिए नहीं (कुछ मामलों में, समय के बाद, आदि) :)
में अंतिम टिप्पणी
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

एक अन्य नोट के रूप में, HTML5 कल्पना नोट जो गतिशील रूप से src विशेषता को संशोधित करता हैटैग का कोई प्रभाव नहीं होगा, लेकिन src विशेषता पर समान करने से

थोडा गुगली करने के बाद मैंने पाया कि यह सबसे अधिक संभवतया क्रोम से संबंधित है जो उपलब्ध सॉकेट के इंतजार में कोणीय नहीं है, और यह कि वीडियो टैग में प्रीलोड = "कोई नहीं" जोड़ने से समस्या ठीक हो गई।

वैकल्पिक हल

नियंत्रक में

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

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

html:

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

@agliottone आपके सुझाए गए वर्कअराउंड बुरी प्रथाओं का उपयोग करता है। आपको कभी भी उस तरह के नियंत्रक से DOM पर नहीं लिखना चाहिए। एक कस्टम निर्देश का उपयोग करने पर विचार करें।

@ बीटफोर्ड 1 सहमत है लेकिन ..
उसने अंतिम दुष्टों को समर्पित किया, तुम उपायों को समाप्त करो

+1

मुझे लगता है कि हर बार एक नया स्रोत सेट किया गया है, आपको नए वीडियो स्रोत को दिखाने के लिए फिर से मूल वीडियो तत्व पर .load() कॉल करना होगा।

नमस्ते, मुझे Google Chrome पर कोणीयजेएस के साथ एक समस्या है जब मैं पृष्ठ को पहली बार एचटीएमएल 5 वीडियो लोड करता हूं, लेकिन जब मैं दृश्य को एनजी-व्यू के साथ बदल देता हूं तो यह लोड नहीं होता है लेकिन फ़ायरफ़ॉक्स में एक इंटरनेट एक्सप्लोरर यह बहुत अच्छी तरह से काम करता है।

मुझे नहीं पता कि मुझे इसके बारे में क्या करना है!

यह <embed> और ngSrc समान मुद्दे की तरह दिखता है। # 339 देखें

इस नीदे को तय किया जाना है :(

मैंने एक plnkr लिखा है
वीडियो क्लिक करें, वीडियो लोड होता है। अन्य लिंक पर क्लिक करें फिर वीडियो पर वापस जाएं। वीडियो लंबित है। आप क्रोम network में अनुरोध देख सकते हैं। दो अनुरोध, एक पिछले है, अभी भी हो रही है। एक और नया है, लंबित है।

@kaiqigong मुझे पिछले हफ्ते काम करना पड़ा क्योंकि वीडियो के लिए URL विश्वसनीय था क्योंकि वीडियो वेबसाइट पर स्थानीय नहीं था।

http://plnkr.co/edit/CL0Lh6VGMy0M3mR1SvVA?==view

मैंने आपका plnkr फोर्क किया और URL सेट करने और उस पर भरोसा करने के लिए इसे संशोधित किया:

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

वीडियो पर देरी हो रही है लेकिन यह मेरे लिए काम कर रहा है।

@ फिलिप- haydon आप जवाब के लिए धन्यवाद।
मैंने आपकी plnkr कोशिश की, लेकिन यह अभी भी ठीक से काम नहीं कर रहा है। (लिंक के बीच जल्दी से कोशिश करें।)
मुझे जो मिला है, जब हम वीडियो टैग (मार्ग या कुछ अन्य DOM संचालन को बदलकर) को हटाते हैं, तो ब्राउज़र अभी भी वीडियो स्रोत को खींच रहा है। जब हम वीडियो पर वापस जाते हैं। एक और वीडियो अनुरोध किया गया है जो नेटवर्क ट्रैफ़िक को जाम कर देता है।
यदि मैं वीडियो टैग हटाने से पहले src '' सेट करता हूं, तो ब्राउज़र खींचना बंद कर देगा, जो समस्या का समाधान करता है। कृपया इस कोडपेन को आज़माएं: http://codepen.io/cagegong/pen/bJHAz

तो मेरा अंतिम समाधान:

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

हाँ मेरा काम करता है, सिर्फ 100% नहीं, क्यों ब्राउज़र अनुरोध को नहीं मारता है जब डोम तत्व यह नष्ट कर रहा है मुझे पता नहीं है। मेरा मानना ​​है कि यह कुछ ऐसा है जिसे कोणीय को खुद को संभालना चाहिए।

यह देखना दिलचस्प है कि इसे खाली स्ट्रिंग पर सेट करने से अनुरोध थो को मारता है, मुझे अपनी परियोजना में इसे जोड़ने के लिए कुछ सेटअप करना पड़ सकता है। धन्यवाद।

@ झारुजाओड्स
आशा है कि यह आपकी समस्या का समाधान करेगा

: +1:

वाह, दो साल और कुछ नहीं। क्या कोणीय बनाए रखा जा रहा है?

कोणीय समय और प्रयास के लायक नहीं है। उन्होंने पहले से ही समुदाय को "भाड़ में जाओ" कहा।

@IDontEatSoap मुझे यकीन नहीं है कि मैं यह प्रश्न क्यों ला रहा हूं, बस कमिट और रिलीज़ की सूची देखें। हर हफ्ते एक नई रिलीज को देखते हुए और कुछ सप्ताहांतों सहित _a day_, यह मुझे बहुत बनाए रखा गया है ...

@ फिलिप-हैडन कृपया संवादी पेशेवर रखें और तकनीकी मामलों पर ध्यान केंद्रित करें, आप हमारी आचार संहिता का उल्लंघन कर रहे हैं।

@IDontEatSoap @ phillip-haydon यदि आप वास्तव में इस मुद्दे में दिलचस्पी रखते हैं तो आगे बढ़ने का सबसे अच्छा तरीका पता है कोड परिवर्तन के साथ एक पुल अनुरोध भेजना है जो सभी ब्राउज़रों में भविष्य का काम करता है।

और फिर भी एक साधारण वीडियो src टैग समर्थित नहीं है?

मैं $ sde को उजागर करके और src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}} का उपयोग करके इसे प्राप्त करने में कामयाब रहा हूं।"

मुझे गलत मत समझो, मैं वास्तव में कोणीय पसंद कर रहा हूं। लेकिन वीडियो src और SVG टैग जैसी छोटी चीजें समर्थित नहीं हैं और वर्कअराउंड की आवश्यकता अप्रत्याशित है।

अच्छा काम जारी रखें :): +1:

+1, गतिशील डेटा के साथ लाइवस्ट्रीम वेब कैमरा जोड़ना असंभव है।

@ pkozlowski-ओपनसोर्स मुझे अब कोई दिलचस्पी नहीं है क्योंकि मुझे अब एंगुलर की परवाह नहीं है कि आपने V2 के लिए समुदाय को खोद दिया है। इस पर प्रयास बर्बाद करने में 0 अंक है।

@ phillip-haydon उस जानकारी के लिए धन्यवाद। मैं सिर्फ Front. फ्रेम में देख रहा था। मैंने V2 मुद्दे के बारे में पहले नहीं सुना था। मैं और मेरी टीम ने V1 और V2 के बीच संगतता को कैसे तोड़ रहे हैं, इसके कारण React.js के साथ जाने का फैसला किया है। आपको लगता है कि पायथन समुदाय में हुई इस प्रकार की सोच ने सभी को सबक सिखाया होगा।

: निराश:

@ phillip-haydon और @StevenDStanton - मुझे यह सुनकर खेद है कि आपने किसी अन्य ढांचे के साथ जाने के लिए चुना है, लेकिन निश्चित रूप से आपको अपने स्वयं के विकास के लिए सबसे अच्छा काम करने वाले उपकरणों को चुनना होगा।

हालांकि, यह स्पष्ट होना चाहिए कि एंगुलरजेएस ने समुदाय को नहीं डुबोया है, वास्तव में समुदाय को एंगुलर 1.x के ऑन-गोइंग विकास में पहले से कहीं अधिक शामिल किया गया है। हम AngularJS 1.4.0 को जारी करने के करीब हैं, जो कि अब तक के बड़े संस्करण परिवर्तनों के बीच सबसे कम समय होगा और कोर टीम पर काम करने वाले अधिक सामुदायिक सदस्य थे जो पहले कभी भी थे। एक बार यह संस्करण जारी हो जाने के बाद हम विकास को AngularJS 1.5 की ओर शुरू करेंगे, जिसे 2015 के अंत से पहले अच्छी तरह से जारी किया जाना चाहिए (सभी चीजें समान होनी चाहिए) यह भी याद रखें कि Google, का शाब्दिक रूप से सैकड़ों उत्पादन का उपयोग होता है AngularJS 1.x अनुप्रयोग संचालन में अभी से ही। यह सुनिश्चित करना Google के हितों में है कि ये अनुप्रयोग, आपके अनुप्रयोगों के समान ही, एक जीवन या एक प्रवास पथ जारी रखें।

एंगुलर 2 के बारे में - यह विकास प्रयास समुदाय की प्रतिक्रिया द्वारा ठीक से संचालित होता है। उद्देश्य एक तेज, छोटे, अधिक मजबूत ढांचे को प्रदान करना है जो बड़े और अधिक जटिल अनुप्रयोगों का समर्थन करने में सक्षम होगा; मोबाइल उपकरणों पर बेहतर प्रदर्शन करने के लिए; और वेब घटकों के पारदर्शी समर्थन के साथ वेब ब्राउज़रों के विकास को जारी रखना।

इसे प्राप्त करने के लिए, AngularJS 1.x पर चीजों को जारी रखना संभव नहीं था, क्योंकि हमें मूलभूत बिल्डिंग ब्लॉक्स जैसे कि इंजेक्टर और कंपाइलर कैसे काम करते हैं, इस पर पुनर्विचार करने की आवश्यकता है। परिणाम एक पूरी तरह से नया ढाँचा है जो उसी उच्च स्तरीय लक्ष्यों को आगे बढ़ाता है जिसने अंगुलरजेएस को लोकप्रिय और विश्वसनीय बना दिया है, बल्कि यह आने वाले वर्षों के लिए भविष्य का सबूत देने में सक्षम है।

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> टैग के src प्रॉपर्टी को अपडेट करने से निपटेंगे। शायद @Kitp की एनजी-मीडिया लाइब्रेरी की तर्ज पर कुछ।

रद्द नहीं किया जा रहा है एक वीडियो के लिए अनुरोध के साथ समस्या के बारे में, मेरा सुझाव है कि हम में के विचार @kaiqigong की तरह कुछ को लागू कर सकता है https://github.com/angular/angular.js/issues/1352#issuecomment -+५,८८,६५,४२५। शायद हम एक video तत्व निर्देश जोड़ सकते हैं जो अपने src से "" तब सेट करता है जब यह तत्व नष्ट हो रहा हो?

अन्य संभावित पुस्तकालयों की कोशिश की जा सकती है:

• ngVideo
• वीडियोगुलर

सदस्यता समाप्त करें। प्रतिक्रिया के लिए AngularJS छोड़कर। क्षमा करें दोस्तों, लेकिन आपकी कड़ी मेहनत के लिए धन्यवाद।

हाँ अच्छा विचार है, मैं भी सदस्यता समाप्त कर रहा हूँ। मैंने http://aurelia.io/ के लिए AngularJS खाई है

इसलिए तकनीकी मुद्दे पर वापस जाएं:

इस मुद्दे पर वास्तव में दो समस्याओं पर चर्चा की जा रही है:

• <video> तत्व मॉनिटर नहीं करता है और न ही src विशेषता पर <source> टैग पर परिवर्तन की प्रतिक्रिया करता है। यह HTML5 कल्पना का हिस्सा है और इसलिए निकट भविष्य में इसके बदलने की संभावना नहीं है। इसका मतलब यह है कि हम <source> साथ या बिना ngSrc <source> तत्वों को गतिशील रूप से निर्दिष्ट करने के मुहावरेदार AngularJS तरीके का उपयोग नहीं कर सकते हैं। दूसरे शब्दों में, हम केवल <source> टैग के src विशेषता में प्रक्षेप का उपयोग नहीं कर सकते क्योंकि <video> तत्व परिवर्तन नहीं उठाएंगे।
• कुछ मामलों में (ब्राउज़र) <video> तत्व एक वीडियो को सही ढंग से डाउनलोड करने के लिए उसके अनुरोध को रद्द नहीं करता है, तो तत्व को DOM से हटा दिया जाता है। इसका प्रभाव यह है कि यदि आप एप्लिकेशन को <video> टैग जोड़ने और हटाने के लिए डोम को जल्दी से बदल देते हैं, ताकि वीडियो को डाउनलोड करने का समय न हो, तो आप ऐसी स्थिति में फंस सकते हैं, जहां एक नया <video> तत्व एक वीडियो को एक्सेस करने की कोशिश कर रहा है जो अभी भी पहले से नष्ट <video> तत्व से लंबित है। ऐसा लगता है कि ब्राउज़र वास्तव में वीडियो अनुरोध को रद्द कर देगा यदि src (या currentSrc ?) विशेषता को नष्ट करने से पहले खाली स्ट्रिंग ( "" ) पर सेट किया गया हो? ।

न तो इन मुद्दों में से एक है AngularJS प्रति-बग। लेकिन इसका मतलब यह नहीं है कि हम इसके बारे में कुछ नहीं कर सकते।

पहली समस्या के बारे में:
इसे ठीक करने का एकमात्र तरीका, कोणीय या किसी अन्य ढांचे में, HTML5 कल्पना में वर्णित गतिशील रूप से बदलते स्रोतों से निपटने के लिए जावास्क्रिप्ट लिखना है। मैंने किसी भी अन्य प्रमुख ढांचे में इसका समाधान नहीं देखा है, लेकिन एंगुलरजेएस में सबसे आकर्षक तरीका निर्देशों का एक सेट बनाकर है। यह प्रभावी रूप से निम्नलिखित परियोजनाओं में लोगों ने क्या करने की कोशिश की है:

• ngMedia
• ngVideo
• वीडियोगुलर

सामुदायिक रुचि के आधार पर, हम एंगुलर 1.5 के लिए इसके समान कुछ विकसित कर सकते हैं और इसे अपने स्वयं के मॉड्यूल के रूप में पैकेज कर सकते हैं (समान रूप से ngCookies पैक किया जाता है)। 1.5 प्लानिंग करते समय इसे फिर से देखें। इस बीच, सबसे अच्छा उपाय यह है कि उपरोक्त पुस्तकालयों में से किसी एक को कार्यान्वित किया जाए और उन्हें आपके लिए अपने पुस्तकालय का काम बनाने में मदद की जाए।

दूसरी समस्या के बारे में:
मैं इस समय व्यक्तिगत रूप से पुन: पेश करने में सक्षम नहीं लगता। मेरे क्रोम में, यह वास्तव में पिछले <video> तत्वों के वीडियो को तब भी स्ट्रीम करना जारी रखता है जब तक कि हम तत्व को नष्ट नहीं कर देते हैं, जिसके बाद कुछ समानांतर में चलने वाले कई अनुरोधों में आगे और पीछे परिणाम देते हैं, लेकिन ये अनुरोध नहीं लगते हैं नए <video> तत्व के वीडियो को लोड होने से रोकें।

यहां, आप एक साथ कई वीडियो डाउनलोड देख सकते हैं।

मेरा मानना ​​है कि यह वास्तव में ब्राउज़र में एक बग है, लेकिन इस बीच, आप इसे अपना video निर्देश (देखें http://plnkr.co/edit/QLMJd24rxnklr638e57Q?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))
वापसी समारोह (रिकॉर्डिंगउल)
$ sce।
};
}]);

फ़ाइल देखें:
<ऑडियो src = "{{Your_URL | trustUrl}}" ऑडियोप्लेयर नियंत्रण> ऑडियो>

नोट: ऑडियो टैग में स्थान को ध्यान में रखें

नमस्ते, मैं वीडियोगुलर का निर्माता हूं।

जैसा कि @petebacondarwin ने समझाया, यह AngularJS के साथ कोई समस्या नहीं है, लेकिन ज्यादातर यह समस्या है कि वीडियो HTML5 पर कैसे काम करता है और कैसे ब्राउज़र वीडियो अनुरोधों के साथ काम करते हैं। और यह और भी अजीब हो जाता है जब आपको मोबाइल उपकरणों पर काम करने की आवश्यकता होती है।

मैंने वीडियो और एचटीएमएल 5 के साथ वीडियोोगुलर के साथ बहुत संघर्ष किया और मुझे यह कहना चाहिए कि इसे सभी ब्राउज़रों में मूल रूप से काम करना कठिन है, लेकिन असंभव नहीं है।

इसलिए, अगर कोई भी AngularJS टीम इस पर मदद चाहता है, तो मुझे इस पर अपने विनम्र ज्ञान को साझा करने और इसे ठीक करने में योगदान करने में खुशी होगी। यह कुछ ऐसा है जो वास्तव में मुझे परेशान करता है और कोणीय 2 में मुझे इससे कोई समस्या नहीं है, इसलिए दोनों रूपरेखाओं में समान दृष्टिकोण रखना बहुत अच्छा होगा।

+1

यदि आपके पास अपने वीडियो प्लेयर पर एक निर्देश है, तो आप src यूआरएल चर को देख सकते हैं और इसे मैन्युअल रूप से अपडेट कर सकते हैं:

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

एक टन परीक्षण और त्रुटि के बाद, मेरे पास अंत में एंड्रॉइड 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);
        }
    }
});

But पार्स यूआरएल वीडियो में json के साथ DB, लेकिन काम नहीं ((कृपया मदद)

जब मैं अपने प्ले बटन पर क्लिक करता हूं तो वीडियो उल्टा दिखाई देता है और जब फुलस्क्रीन को दबाकर उसके स्थान को इस मुद्दे पर कोई सुझाव दिया जाता है

+1 वहाँ कोई पार्स नहीं है यूआरएल यह src या ngSrc के साथ होना चाहिए।
क्या यह त्रुटि छोड़ दी गई है?

मैं एक ही समस्या हो रही है वहाँ अभी तक एक समाधान किया गया है

यह समाधान बहुत अच्छी तरह से काम करता है।

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