Angular.js: ngSrc tidak bekerja dengan baik dengan tag Sumber Video HTML5

Saya mengalami masalah juga, namun saya merasa bahwa masalah tersebut berada di Angulars ng-repeat.
Jika saya menghapus video dari ruang lingkup itu, itu baik-baik saja, jika tidak, bahkan tidak ada kontrol yang akan dimuat.

saya juga! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

saya juga.

saya juga! tolong aku

+1

Saya menggunakan ng-repeat untuk menyetel sumber ng-src dan mereka memuat dengan benar saat pemuatan halaman, tetapi jika video disembunyikan melalui ng-show dan kemudian ditampilkan lagi, sumber tidak dimuat ulang (di Chrome).

Saya dapat mengonfirmasi pengamatan sourcec0de - jika saya menghapus ng-repeat dan menggunakan satu sumber ng-src (atau beberapa sumber ng-src), video akan dimuat ulang dengan benar setelah ditampilkan ulang.

Saya mempunyai masalah yang sama. Apakah ada orang yang sedang menyelidiki ini?

Dengan atau tanpa ng-src , dengan atau tanpa ng-repeat , chrome berulang kali gagal memuat ulang video HTML5 setelah keluar lalu kembali ke halaman.

Dari cache yang bersih, saya melihat 2 permintaan (yang pertama Pending ), yang kedua dengan 206 Partial Content . Jika saya menyegarkan, saya melihat satu permintaan dengan 304 Not Modified . Saat saya keluar dari tampilan video lalu kembali (baik melalui tautan atau menggunakan tombol kembali), saya mendapatkan dua permintaan untuk video tersebut hanya dengan status Pending . Salah satunya akan memiliki tipe mime video/mp4 (benar), yang lainnya hanya mengatakan Pending .

Apakah ada yang melihat masalah ini ???

Dapatkah Anda memberikan contoh nyata dari masalah ini?
Apakah ini berfungsi pada beberapa browser?
Sudahkah Anda memeriksa apakah browser mendukung pengubahan atribut src pada elemen video HTML5 setelah rendering?

Maaf, aplikasi contoh belum dipublikasikan.
Berfungsi dengan baik di Safari.
Seperti yang ditunjukkan di atas, saya menggunakan direktif ng-src dan atribut src berkode keras dengan hasil yang sama.

Apa yang terjadi jika Anda mengubah src dengan jQuery lurus?
Saya ingin tahu apakah ini sebenarnya bug di browser daripada AngularJS?

Pada 16 Juli 2013 22:31, Paul Grenier [email protected] menulis:

Maaf, aplikasi contoh belum dipublikasikan.
Berfungsi dengan baik di Safari.
Seperti yang ditunjukkan di atas, saya menggunakan direktif ng-src dan src berkode keras
atribut dengan hasil yang sama.

-
Balas email ini secara langsung atau lihat di Gi tHubhttps: //github.com/angular/angular.js/issues/1352#issuecomment -21075654
.

Meskipun saya tidak mengubah src (mis., Membuat kode keras atribut video src), masalah tetap terjadi. Saya tidak memiliki cara untuk mensimulasikan masalah dari Angular karena Angular mengontrol konten. Saya setuju, ini mungkin hanya masalah di Chrome tetapi saya tidak yakin bagaimana cara mengujinya.

Apa maksud Anda Angular mengontrol konten?

Masalah terjadi saat, menggunakan pengontrol Angular, konten berubah, memuat tampilan lain. Menggunakan tombol kembali atau tautan ke rute sebelumnya menampilkan konten sebelumnya tetapi video gagal dimuat - setiap saat. Jika ini masalah Angular, mungkin hanya di Chrome. Dugaan saya adalah bahwa cache agresif Chrome dan metode Angular untuk mengubah tampilan tidak dapat menyetujui apa yang harus dimuat.

@AutoSponge kasus uji saya adalah:
halaman 1 dengan tombol untuk pergi ke halaman 2
halaman 2 dengan pemutar videojs dan tombol untuk kembali ke halaman 1

navigasikan ke halaman 1, lalu ke halaman 2, video dimuat dengan benar.
klik tombol untuk kembali ke halaman 1, lalu ke halaman 2, google chrome berhenti menggunakan videojs. ini terjadi karena objek videojs tidak dihapus saat angular menghapus elemen dari DOM, seperti yang diharapkan. ini bukan angularjs (yay!)

Hapus itu sebelum menginisialisasi pemutar videojs. Saya melakukan ini karena saya memiliki arahan yang menambahkan pemain. Misalnya, jika digunakan dalam sebuah perintah:

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

Sama seperti OP, saya tidak menggunakan objek pembungkus. Video dimuat melalui tag video HTML5. Apakah Anda menyarankan agar dihapus secara terpisah?

nah, videoJS melacak pemain yang ditambahkan ke DOM tetapi sepertinya tidak melihat perubahan. Jika Anda menghapus elemen dari DOM (misalnya karena Anda menavigasi ke rute lain), videoJS tidak akan tahu dan tidak akan menginisialisasinya lagi. lihat baris 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
jika Anda menghapusnya di luar videoJS, saya rasa Anda harus memanggil metode dispose () dari pemutar. Saya kira ini berfungsi seperti ketika Anda membungkus plugin jquery (?). Inilah yang membuat saya berpikir bahwa ini bukan masalah sudut.

mengalami masalah ini juga.
memuat file AV ke src atau ng-src tidak melakukan pekerjaan itu. perlu menulis arahan atau pabrik agar berfungsi.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

Saya mengalami masalah ini juga.

Video gagal dimuat di Chrome, Firefox dan Safari. Ia bekerja, bagaimanapun, di IE.

Berikut solusinya: http : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Ini menciptakan kedipan yang berantakan saat pemuatan halaman, tetapi berhasil.

+1

solusinya adalah sebagai berikut:

di pengontrol Anda mengatur fungsi dalam kasus saya seperti ini:

    $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;
    };

maka dalam kasus saya di template saya, saya memiliki yang berikut:

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

template saya di views / audio.html terlihat sebagai berikut:

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

jika $ scope.audio.play tidak berubah maka tidak akan terjadi reload, jadi saya menggunakan nama file, ini bisa saja berupa nomor acak saja

@caitp Saya pikir Anda memiliki PR untuk ini, apakah ingatan saya gagal?

@IgorMinar Saya akan mengerjakannya, tetapi saya menyadari bahwa saya tidak dapat mereproduksi masalah (lihat http://jsfiddle.net/J77gE/). Saya pikir akan menyenangkan untuk membangun modul media helper daripada di luar inti dengan opsi yang lebih mengikat.

Tapi sejauh yang saya tahu, ng-src berfungsi dengan baik untuk tag sumber di browser modern dan modern angular

Masalah yang saya sebutkan secara khusus karena mengubah tampilan dan menggunakan tombol kembali. Saya tidak yakin bagaimana jsfiddle itu mencoba membuat ulang masalahnya.

Tidak, intinya adalah kami tidak memiliki masalah dalam menginterpolasi tag sumber, saya pikir ini bukan masalahnya. Saya belum dapat mereproduksi masalah khusus Anda sama sekali

@AutoSponge Bisakah Anda memberikan aplikasi demo dan instruksi tentang cara mereproduksi ini?

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

Klik tautan Video. Ini akan dimuat pertama kali. Klik Beranda lalu Video lagi. Dalam 1 atau 2 klik mungkin akan berhenti memuat di Chrome.

(dan jangan menilai, saya melemparkan ini bersama-sama berdasarkan aplikasi dari 8 bulan yang lalu!)

@AutoSponge ini bukan masalah Angular. Ini adalah perilaku Chrome yang aneh, tetapi masih menginterpolasi file sumber Anda dan mendapatkan src yang benar. Tampaknya ada masalah dengan cache, yang agak disayangkan. (Anda juga memiliki masalah ini dengan ngIf, tetapi ini dapat dielakkan dengan menggunakan ngShow + menyetel volume ke 0)

Saya setuju ini adalah masalah yang tidak menguntungkan dengan Chrome. Saya pikir itulah alasan utama masalah ini tetap terbuka selama 9 bulan dengan sedikit perbaikan. Karena Chrome kemungkinan besar tidak akan memperbaikinya, menurut Anda apakah tidak masuk akal untuk membuat opsi perusak cache? Saya pikir itu hanya akan menambahkan string acak ke src.

Saya juga berpikir itu mungkin ada hubungannya dengan pushState - baik implementasi di Chrome atau penggunaannya di Angular. Tapi sejujurnya saya pikir itu akan diperbaiki sekarang.

Saya merasa bahwa masalah khusus ini mungkin termasuk dalam pelacak masalah chromium (saya pikir ada beberapa masalah terkait cache HTMLMediaElement yang sudah terbuka, jadi akan ada baiknya membicarakannya di sana).

Saya tidak dapat mengingatnya, tetapi mungkin saja ini adalah perilaku yang diharapkan yang ditentukan dalam spesifikasi (dan ini bukan pertama kalinya spesifikasi meminta perilaku aneh / tidak menguntungkan)

Ini mungkin terpisah dari masalah yang saya alami, tetapi saya mengalami masalah di mana

Harapan yang agak masuk akal dan terkait!

Baru saja menemukan beberapa solusi. Ini berfungsi untuk chrome, tetapi tidak untuk browser lain (dalam beberapa kasus, waktu demi waktu, dll) :)
Komentar terakhir di
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

Sebagai catatan lain, catatan spesifikasi HTML5 yang secara dinamis mengubah atribut src dari atag tidak akan berpengaruh, tetapi melakukan hal yang sama pada atribut src dari sebuah

Setelah sedikit googling, saya menemukan bahwa ini kemungkinan besar terkait dengan chrome menunggu soket yang tersedia untuk tidak bersudut, dan menambahkan preload = "none" ke tag video tampaknya memperbaiki masalah.

solusi

dalam pengontrol

$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 solusi yang Anda sarankan menggunakan praktik yang buruk. Anda tidak boleh menulis ke DOM dari pengontrol seperti itu. Pertimbangkan untuk menggunakan perintah khusus.

@btk 1 setuju tapi ..
Dia mengabdikan yang terakhir yang jahat, kamu mengakhiri pengobatan

+1

Saya rasa setiap kali sumber baru disetel, Anda harus memanggil .load() pada elemen video asli lagi untuk membuat sumber video baru muncul.

Hai, saya punya masalah dengan angularJS di Google Chrome ketika saya memuat halaman pertama kali memuat Video HTML 5 tetapi ketika saya mengubah tampilan dengan ng-view, itu tidak memuat tetapi di firefox sebuah internet explorer itu berfungsi dengan sangat baik.

Saya tidak tahu apa yang harus saya lakukan!

Ini terlihat seperti masalah yang mirip dengan <embed> dan ngSrc . Lihat # 339

Ini perlu diperbaikiddddddd :(

Saya telah menulis sebuah plnkr
klik videonya, videonya dimuat. Klik tautan lain lalu kembali ke video. Video ini menunggu keputusan. Anda dapat melihat permintaan di chrome network . Dua permintaan, satu sebelumnya, masih mendapatkan. Lainnya adalah yang baru, menunggu keputusan.

@kaiqigong Saya membuatnya berfungsi minggu lalu dengan menyetel URL sebagai tepercaya untuk video tersebut karena video tersebut tidak lokal ke situs web.

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

Saya mem-fork plnkr Anda dan memodifikasinya untuk menyetel URL dan mempercayainya:

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

Ada penundaan di video tapi itu berhasil untuk saya.

@ phillip-haydon terima kasih atas balasan Anda.
Saya sudah mencoba plnkr Anda, tetapi masih belum berfungsi dengan benar. (Coba cepat beralih di antara tautan.)
Yang saya temukan adalah, saat kami menghapus tag video (dengan mengubah rute atau beberapa operasi DOM lainnya), browser masih menarik sumber video. Saat kami beralih kembali ke video. Permintaan video lain dibuat yang membuat lalu lintas jaringan macet.
Jika saya menyetel src video menjadi '' sebelum menghapus tag video, browser akan berhenti menarik, yang menyelesaikan masalah. Silakan coba codepen ini: http://codepen.io/cagegong/pen/bJHAz

Jadi solusi terakhir saya:

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

Ya, milik saya berfungsi, hanya saja tidak 100%, mengapa browser tidak menghentikan permintaan itu sendiri ketika elemen dom yang memintanya dihancurkan Saya tidak tahu. Saya tidak percaya ini adalah sesuatu yang harus ditangani oleh Angular sendiri.

Sangat menarik untuk melihat bahwa menyetelnya ke string kosong memang mematikan permintaan itu, saya mungkin harus menyiapkan sesuatu untuk menambahkannya ke dalam proyek saya. Terima kasih.

@jhara
Semoga ini menyelesaikan masalah Anda

: +1:

Wow, dua tahun dan tidak ada apa-apa. Apakah sudut dipertahankan sama sekali?

Angular tidak sebanding dengan waktu dan tenaga. Mereka sudah mengatakan "persetan" dengan komunitas dengan Angular 2.0.

@IDontEatSoap Saya tidak yakin mengapa Anda mengajukan pertanyaan ini, cukup periksa daftar komit dan rilis . Diberikan rilis baru setiap minggu dan beberapa komit _ sehari_, termasuk akhir pekan, sepertinya cukup banyak dipertahankan bagi saya ...

@ phillip-haydon tolong jaga agar percakapan tetap profesional dan fokus pada masalah teknis, Anda melanggar kode etik kami .

@IDontEatSoap @ phillip-haydon jika Anda benar-benar tertarik dengan masalah ini yang diatasi, cara terbaik untuk bergerak maju adalah mengirim permintaan penarikan dengan perubahan kode yang membuat masa depan berfungsi di semua browser.

Namun, tag src video sederhana tidak didukung?

Saya berhasil membuatnya berfungsi dengan mengekspos $ sde dan menggunakan src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"

Jangan salah paham, saya sangat suka bersudut. Namun hal-hal kecil seperti tag src dan SVG video tidak didukung dan memerlukan solusi tidak terduga.

Pertahankan kerja bagus :): +1:

+1, tidak mungkin untuk menambahkan webcam streaming langsung dengan data dinamis.

@ pkozlowski-opensource Saya tidak lagi tertarik karena saya tidak peduli dengan Angular sekarang setelah Anda meninggalkan komunitas untuk V2. Tidak ada gunanya membuang-buang tenaga untuk itu.

@ phillip-haydon Terima kasih atas informasi itu. Saya baru saja melihat ke Frontend Frameworks untuk digunakan dengan node.js. Saya belum pernah mendengar tentang masalah V2 sebelumnya. Saya dan Tim saya telah memutuskan untuk menggunakan React.js karena cara mereka memutus kompatibilitas antara V1 dan V2. Anda pikir celah besar yang disebabkan oleh jenis pemikiran ini dalam komunitas Python akan memberi pelajaran kepada semua orang.

:kecewa:

@ phillip-haydon dan @StevenDStanton - Saya menyesal mendengar bahwa Anda telah memilih untuk menggunakan kerangka kerja lain tetapi tentu saja Anda harus memilih alat yang paling sesuai untuk pengembangan Anda sendiri.

Hanya untuk memperjelas, AngularJS belum meninggalkan komunitas, pada kenyataannya komunitas telah terlibat lebih dari sebelumnya dalam pengembangan Angular 1.x. Kami hampir merilis AngularJS 1.4.0, yang akan menjadi waktu tersingkat antara perubahan versi besar sejauh ini dan memiliki lebih banyak anggota komunitas yang bekerja di tim inti daripada sebelumnya. Setelah versi ini dirilis, kami akan memulai pengembangan menuju AngularJS 1.5, yang seharusnya (semua hal sama) dirilis jauh sebelum akhir 2015. Ingat juga bahwa Google, sendiri secara harfiah memiliki ratusan produksi yang menggunakan aplikasi AngularJS 1.x dalam operasi sekarang juga. Merupakan kepentingan Google untuk memastikan bahwa aplikasi ini, sama seperti aplikasi Anda, terus memiliki jalur kehidupan atau migrasi.

Mengenai Angular 2 - upaya pengembangan ini justru didorong oleh umpan balik dari komunitas. Tujuannya adalah untuk menyediakan kerangka kerja yang lebih cepat, lebih kecil, lebih kuat yang akan dapat mendukung aplikasi yang lebih besar dan lebih kompleks; untuk bekerja lebih baik di perangkat seluler; dan untuk terus merangkul evolusi browser web dengan dukungan transparan untuk Komponen Web.

Untuk mencapai hal ini, tidak mungkin untuk terus memasang baut ke AngularJS 1.x, karena kami perlu memikirkan kembali beberapa blok penyusun fundamental, seperti cara kerja injektor dan kompiler. Hasilnya adalah kerangka kerja yang benar-benar baru yang terus mendorong tujuan tingkat tinggi yang sama yang membuat AngularJS sepopuler dan dapat diandalkan seperti sebelumnya, tetapi juga dapat memberikan jalur bukti masa depan untuk tahun-tahun mendatang.

Mungkin tidak ada solusi peningkatan turn-key untuk bermigrasi dari AngularJS 1.x ke Angular 2, itu benar. Tetapi tentunya akan lebih mudah untuk bermigrasi dari AngularJS 1.x ke Angular 2 daripada bermigrasi dari AngularJS 1.x ke kerangka yang sama sekali berbeda.

Menurut saya, browser tidak begitu baik dalam mengamati elemen <source> untuk perubahan pada atribut src . Masalah Poster Asli dapat diatasi dengan menggunakan ng-if .

Lihat http://plnkr.co/edit/rpiEg1ki7KXgD40zy8qV

Saya hanya menggunakan

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

@ tot-ra - Saya yakin versi Anda berfungsi karena browser melihat perubahan pada atribut src pada elemen <video> seperti yang dapat dilihat di sini: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

Dari spesifikasi HTML5: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

Mengubah elemen sumber dan atributnya secara dinamis saat elemen tersebut sudah dimasukkan ke dalam elemen video atau audio tidak akan berpengaruh. Untuk mengubah apa yang sedang diputar, cukup gunakan atribut src pada elemen media secara langsung, kemungkinan memanfaatkan metode canPlayType () untuk memilih dari antara sumber daya yang tersedia. Umumnya, memanipulasi elemen sumber secara manual setelah dokumen diurai adalah pendekatan rumit yang tidak perlu.

Artinya, Anda tidak dapat mengharapkan browser mengatasi AngularJS (atau apa pun dalam hal ini) mengubah elemen sumber secara dinamis. Sebaliknya, yang kita butuhkan adalah beberapa arahan khusus media yang akan menangani pembaruan properti <video> tag src bila perlu. Mungkin sesuatu yang mirip dengan library @caitp .

Mengenai masalah dengan permintaan untuk video tidak dibatalkan, saya menyarankan agar kita bisa menerapkan sesuatu seperti @kaiqigong ide 's di https://github.com/angular/angular.js/issues/1352#issuecomment -58.865.425. Mungkin kita bisa menambahkan petunjuk elemen video yang menetapkan src menjadi "" ketika elemennya sedang dihancurkan?

Perpustakaan potensial lain yang bisa dicoba:

• ngVideo
• videogular

Berhenti berlangganan. Meninggalkan AngularJS untuk Bereaksi. Maaf teman-teman tapi terima kasih atas kerja keras Anda.

Ya, ide bagus, saya juga berhenti berlangganan. Saya telah membuang AngularJS untuk http://aurelia.io/

Jadi kembali ke masalah teknis yang dihadapi:

Sebenarnya ada dua masalah yang dibahas dalam masalah ini:

• The <video> elemen tidak memonitor atau bereaksi terhadap perubahan pada src atribut pada <source> tag. Ini adalah bagian dari spesifikasi HTML5 dan sepertinya tidak akan berubah dalam waktu dekat. Ini berarti bahwa kita tidak dapat menggunakan cara AngularJS idiomatik untuk menentukan elemen <source> secara dinamis, dengan atau tanpa ngSrc . Dengan kata lain, kita tidak bisa menggunakan interpolasi pada atribut <source> tag src karena elemen <video> tidak akan mengambil perubahan.
• Dalam beberapa kasus (browser) elemen <video> tidak membatalkan permintaannya untuk mengunduh video dengan benar, kemudian elemen tersebut dihapus dari DOM. Efeknya adalah jika aplikasi Anda mengubah DOM cukup cepat, menambahkan dan menghapus tag <video> , sehingga video belum sempat diunduh, Anda dapat terjebak dalam situasi di mana <video> Elemen <video> sebelumnya telah dihancurkan. Tampaknya browser sebenarnya akan membatalkan permintaan video jika atribut src (atau currentSrc ?) Disetel ke string kosong ( "" ) sebelum elemen dihancurkan .

Tak satu pun dari masalah ini yang merupakan bug di AngularJS itu sendiri. Tetapi itu tidak berarti bahwa kita tidak dapat berbuat sesuatu tentang itu.

Mengenai masalah pertama:
Satu-satunya cara untuk memperbaikinya, di Angular atau kerangka kerja lainnya, adalah dengan menulis JavaScript untuk menangani sumber yang berubah secara dinamis, seperti yang dijelaskan dalam spesifikasi HTML5. Saya belum melihat solusi untuk ini di salah satu kerangka kerja utama lainnya tetapi di AngularJS cara yang paling menarik adalah dengan membangun satu set arahan. Inilah yang secara efektif telah dicoba dilakukan oleh orang-orang dalam proyek-proyek berikut:

• ngMedia
• ngVideo
• videogular

Bergantung pada minat komunitas, kita dapat melihat mengembangkan sesuatu yang mirip dengan ini untuk Angular 1.5 dan memaketkannya sebagai modulnya sendiri (mirip dengan bagaimana ngCookies dikemas). Mari kita lihat kembali ini saat melakukan perencanaan 1.5. Sementara itu, solusi terbaik adalah menerapkan salah satu pustaka di atas dan membantu mereka membuat pustaka mereka berfungsi untuk Anda.

Mengenai masalah kedua:
Saya sepertinya tidak dapat mereproduksi ini secara pribadi saat ini. Di Chrome saya, itu memang terus mengalirkan video elemen <video> bahkan setelah kami menghancurkan elemen, yang setelah beberapa bolak-balik menghasilkan banyak permintaan yang berjalan secara paralel, tetapi permintaan ini tampaknya tidak mencegah pemuatan video elemen <video> .

Di sini, Anda dapat melihat beberapa unduhan video secara bersamaan.

Saya yakin ini benar-benar bug di browser, tetapi sementara itu, Anda dapat mengatasinya dengan memberikan perintah video Anda sendiri (lihat http://plnkr.co/edit/QLMJd24rxvklr638e57Q?p=preview) :

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

Di sini, Anda dapat melihat bahwa pengunduhan video sekarang berhenti saat kita keluar dari tampilan video.

Untuk saat ini, ini adalah solusi yang disarankan untuk masalah ini.

@petebacondarwin ... Dari melihat spesifikasi w3c, tampaknya agen pengguna yang membatalkan dokumen akan menyebabkan pemuatan streaming juga dibatalkan. Memanggil window.stop() membatalkan streaming jaringan lebih lanjut untuk saya.

Pada akhirnya, ini bukan hal yang paling ideal jika Anda menginginkan sumber daya lain, tetapi menyediakan beberapa tingkat solusi.

@daleyjem terima kasih atas ide ini.
Kami tidak dapat melakukan ini dalam arahan inti karena akan menghentikan streaming video lain.

Buat saja Filter:
app.filter ("trustUrl", ['$ sce', function ($ sce) {
fungsi pengembalian (recordingUrl) {
return $ sce.trustAsResourceUrl (recordingUrl);
};
}]);

Dalam File Tampilan:
<audio src = "{{Your_URL | trustUrl}}" kontrol pemutar audio> audio>

CATATAN: perhatikan ruang di tag audio

Hai, saya pencipta Videogular.

Seperti yang dijelaskan oleh @petebacondarwin , ini bukan masalah dengan AngularJS tetapi sebagian besar masalah tentang cara kerja video di HTML5 dan cara browser menangani permintaan video. Dan itu menjadi lebih aneh ketika Anda harus membuatnya berfungsi di perangkat seluler.

Saya sering bertengkar dengan video dan HTML5 dengan Videogular dan saya harus mengatakan bahwa sulit untuk membuatnya bekerja dengan mulus di semua browser, tetapi bukan tidak mungkin.

Jadi, jika ada orang di tim AngularJS yang menginginkan bantuan dalam hal ini, saya akan dengan senang hati membagikan pengetahuan saya yang sederhana tentang hal ini dan berkontribusi untuk memperbaikinya. Ini adalah sesuatu yang benar-benar mengganggu saya dan di Angular 2 saya tidak mengalami masalah dengan ini jadi akan sangat bagus untuk memiliki pendekatan serupa di kedua kerangka kerja.

+1

Jika Anda memiliki perintah di pemutar video, Anda dapat menonton variabel src url dan memperbaruinya secara manual:

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

Setelah banyak trial and error akhirnya saya memutar video dengan andal di Android 4.2.2, 4.3, 4.4.4, 5.0.0, dan 5.1.0. Instal Crosswalk dan gunakan Videogular

Diperbaiki dengan arahan khusus

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

İ parse url video dalam db dengan json, tetapi tidak berfungsi (((tolong bantu

ketika saya mengklik tombol putar saya, video ditampilkan terbalik dan ketika menekan layar penuh, itu mendapatkan ke posisinya setiap saran untuk masalah ini

+1 tidak ada parsing url baik itu dengan src atau ngSrc.
Apakah kesalahan ini telah ditinggalkan?

Saya mengalami masalah yang sama ini apakah ada solusinya

Solusi ini bekerja dengan sangat baik.

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