Angular.js: ngSrcがHTML5ビデオソースタグで正しく機能しない

私も問題を抱えていますが、問題はAngularsng-repeatにあると感じています。
そのスコープからビデオを削除すると、正常に再生されます。そうしないと、どのコントロールも読み込まれません。

私も！ http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

私も。

私も！ 私を助けて

+1

ng-repeatを使用してng-srcソースを設定していますが、ページの読み込み時に正しく読み込まれますが、動画がng-showで非表示になってから再度表示された場合、ソースは再読み込みされません（Chromeの場合）。

sourcec0deの観察を確認できます-ng-repeatを削除し、単一のng-srcソース（または複数のng-srcソース）を使用すると、再表示時にビデオが正しくリロードされます。

私は同じ問題を抱えています。 現在誰かがこれを調べていますか？

ng-src有無にかかわらず、 ng-repeat有無にかかわらず、Chromeは、移動してからページに戻った後、HTML5ビデオの再読み込みに繰り返し失敗します。

クリーンキャッシュから、2つのリクエスト（最初のリクエストはPending ）、2番目のリクエストは206 Partial Contentます。 更新すると、 304 Not Modifiedリクエストが1つ表示されます。 ビデオビューから移動して（リンクを介して、または戻るボタンを使用して）戻ると、 Pendingステータスのビデオに対する2つのリクエストが表示されます。 これらの1つはmimeタイプのvideo/mp4 （正しい）を持ち、もう1つはPendingとだけ言います。

誰かがこの問題を見ていますか？

この問題の実行例を提供できますか？
一部のブラウザではまったく機能しますか？
ブラウザがレンダリング後のHTML5ビデオ要素のsrc属性の変更をサポートしているかどうかを確認しましたか？

申し訳ありませんが、サンプルアプリはまだ公開されていません。
Safariで正常に動作します。
上に示したように、ng-srcディレクティブとハードコードされたsrc属性の両方を使用したところ、同じ結果が得られました。

ストレートjQueryでsrcを変更するとどうなりますか？
これは実際にはAngularJSではなくブラウザのバグなのだろうか？

2013年7月16日22：31で、ポール・グルニエ[email protected]は書きました：

申し訳ありませんが、サンプルアプリはまだ公開されていません。
Safariで正常に動作します。
上に示したように、ng-srcディレクティブとハードコードされたsrcの両方を使用しました
同じ結果の属性。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1352#issuecomment-21075654で表示してください
。

srcを変更していない場合（たとえば、ビデオのsrc属性をハードコーディングしていない場合）でも、問題が発生します。 Angularがコンテンツを制御するため、Angularから離れて問題をシミュレートする方法がありません。 私は同意します、それは単にChromeの問題かもしれませんが、それをテストする方法がわかりません。

Angularがコンテンツを制御するとはどういう意味ですか？

この問題は、Angularのコントローラーを使用してコンテンツが変更され、別のビューが読み込まれるときに発生します。 戻るボタンまたは前のルートへのリンクを使用すると、前のコンテンツが表示されますが、ビデオの読み込みに失敗します-毎回。 Angularの問題である場合は、おそらくChromeのみにあります。 私の推測では、Chromeの積極的なキャッシュとAngularのビューを変更する方法は、何をロードするかについて合意できません。

@AutoSponge私のテストケースは：
1ページに2ページに移動するボタンがあります
videojsプレーヤーと1ページに戻るためのボタンを備えた2ページ

ページ1に移動し、次にページ2に移動すると、ビデオが正しくロードされます。
ボタンをクリックして1ページに戻り、次に2ページに移動します。googlechromeはvideojsの使用を停止します。 これは、予想どおり、Angularが要素をDOMから削除したときにvideojsオブジェクトが削除されなかったために発生します。 これはangularjsではありません（イェーイ！）

videojsプレーヤーを初期化する前に削除してください。 これを行うのは、プレーヤーを追加するディレクティブがあるためです。 たとえば、ディレクティブで使用する場合：

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

OPと同じように、私はラッパーオブジェクトを使用していません。 ビデオは、HTML5ビデオタグを介してロードされます。 個別に削除することを提案していますか？

ええと、videoJSはDOMに追加されたプレーヤーを追跡しますが、変更を監視していないようです。 要素をDOMから削除すると（たとえば、別のルートに移動したため）、videoJSはそれを認識せず、再度初期化することはありません。 17行目を参照してください： https ：
videoJSの外部で削除する場合は、プレーヤーのdispose（）メソッドを呼び出す必要があると思います。 これは、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>

$ scope.audio.playが変更されない場合、リロードは発生しないため、ファイルの名前を使用しています。代わりに、これは乱数である可能性があります。

@caitpあなたはこれに対するPRを持っていると思いました、私の記憶は私を失敗させていますか？

@IgorMinar作業するつもりでしたが、問題を再現できないことに気付きました（http://jsfiddle.net/J77gE/を参照）。 より多くのバインディングオプションを備えたコアの外側ではなく、メディアヘルパーモジュールを構築するのは楽しいだろうと思いました。

しかし、私が知る限り、ng-srcは最新のブラウザーと最新のAngularのソースタグに対して正常に機能します

私が言及した問題は、特にビューの変更と戻るボタンの使用によるものでした。 そのjsfiddleがどのように問題を再現しようとしているのかわかりません。

そうではありません。重要なのは、ソースタグの補間に問題がないということです。これは問題ではないと思います。 私はあなたの特定の問題をまったく再現することができませんでした

@AutoSpongeは、

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

ビデオリンクをクリックします。 初回ロードします。 [ホーム]、[ビデオ]の順にクリックします。 1〜2回のクリックで、Chromeへの読み込みが停止する可能性があります。

（そして判断しないでください、私は8ヶ月前のアプリに基づいてこれを一緒に投げました！）

@AutoSpongeこれはAngularの問題ではありません。 これはChromeの奇妙な動作ですが、それでもソースファイルを補間し、正しいsrcを取得しています。 これはキャッシュの問題のようですが、少し残念です。 （ngIfでもこの問題が発生しますが、これはngShow +音量を0に設定することで回避できます）

Chromeの不幸な問題だと思います。 これが、この問題が9か月間開いたままで、ほとんど作業が行われなかった主な理由だと思います。 Chromeはそれを修正する可能性が低いので、キャッシュバスティングオプションを作成するのは不合理だと思いますか？ srcにランダムな文字列を追加するだけだと思います。

また、Chromeでの実装またはAngularでの使用のいずれかであるpushStateと関係があるのではないかと思いました。 しかし、正直なところ、今では修正されていると思いました。

この特定の問題はおそらくクロム問題追跡システムに属しているように感じます（HTMLMediaElementキャッシュ関連の問題がすでにいくつか開いていると思うので、そこで説明する価値があります）。

思い出せませんが、これが仕様で定義されている予想される動作である可能性があります（そして、仕様が奇妙な​​/不幸な動作を要求したのは初めてではありません）

これは私が抱えていた問題とは別かもしれませんが、私はどこで問題を抱えていました

それがある程度理解可能で関連していることを願っています！

いくつかの回避策を見つけました。 Chromeでは機能しますが、別のブラウザでは機能しません（場合によっては、何度も）:)
の最後のコメント
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

別の注意として、HTML5仕様では、のsrc属性を動的に変更することに注意しています。タグは効果がありませんが、のsrc属性で同じことを行います

少しグーグルした後、これはおそらく利用可能なソケットが角度を付けないのを待っているクロムに関連していることがわかり、ビデオタグにpreload = "none"を追加すると問題が解決したようです。

回避策

コントローラー内

$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に書き込むことは絶対にしないでください。 カスタムディレクティブの使用を検討してください。

@btford 1は同意しますが、..
彼は最後の邪悪な者を捧げました、あなたがたは救済の終わりです

+1

新しいソースが設定されるたびに、ネイティブビデオ要素で.load()を再度呼び出して、新しいビデオソースを表示する必要があると思います。

こんにちは、HTML 5ビデオを初めてロードするときにGoogle ChromeでangularJSに問題がありますが、ng-viewでビューを変更するとロードされませんが、FirefoxではInternetExplorerで非常にうまく機能します。

私はそれについて何をしなければならないのか分かりません！

これは、 <embed>およびngSrcと同様の問題のように見えます。 ＃339を参照

これは修正する必要がありますddddddd :(

私はplnkrを書きました
ビデオをクリックすると、ビデオがロードされます。 他のリンクをクリックしてから、ビデオに戻ります。 ビデオは保留中です。 Chrome networkリクエストを確認できます。 2つのリクエスト、1つは前のもので、まだ取得中です。 もう1つは新しいもので、保留中です。

@kaiqigong先週、ビデオがWebサイトに対してローカルではなかったため、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")
        };
   })

ビデオに遅れがありますが、それは私のために働いています。

@ phillip-haydon返信ありがとうございます。
私はあなたのplnkrを試しましたが、それでも正しく機能していません。 （リンクをすばやく切り替えてみてください。）
私が見つけたのは、（ルートやその他のDOM操作を変更して）ビデオタグを削除しても、ブラウザーはまだビデオソースをプルしているということです。 ビデオに戻るとき。 ネットワークトラフィックを妨害する別のビデオ要求が行われます。
ビデオタグを削除する前にビデオのsrcを''に設定すると、ブラウザがプルを停止し、問題が解決します。 このcodepenを試してください： http ：//codepen.io/cagegong/pen/bJHAz

だから私の最終的な解決策：

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

ええ、私のものは100％ではなく機能します。なぜ、要求しているdom要素が破棄されたときに、ブラウザーが要求自体を強制終了しないのか、私にはわかりません。 これはAngular自体が処理する必要があるものではないと思います。

空の文字列に設定するとリクエストが強制終了されるのは興味深いことです。プロジェクトに追加するために何かを設定する必要があるかもしれません。 ありがとう。

@jharaujoads
これがあなたの問題を解決することを願っ

：+1：

うわー、2年と何も。 角度はまったく維持されていますか？

Angularは時間と労力の価値がありません。 彼らはすでにAngular2.0でコミュニティに「あなたをファック」と言っていました。

@IDontEatSoapなぜこの質問をするのかコミットとリリースのリストを確認してください。 毎週新しいリリースがあり、週末を含めて_日_のコミットが少ないことを考えると、私にはほとんど維持されているように見えます...

@ phillip-haydon会話の専門家を維持し、技術的な問題に集中してください。あなたは私たちの行動規範に違反してい

@IDontEatSoap @ phillip-haydonこの問題に対処することに本当に興味がある場合、前進するための最良の方法は、すべてのブラウザーで将来機能するようにコードを変更したプルリクエストを送信することです。

それでも、単純なビデオsrcタグはサポートされていませんか？

$ sdeを公開し、src = "{{$ sce.trustAsResourceUrl（item.VideoUrl）}}"を使用することで、なんとか機能させることができました。

誤解しないでください、私は本当に角度が好きです。 ただし、video srcタグやSVGタグなどの小さなものはサポートされておらず、回避策が必要になることは予想外です。

良い仕事を続けてください：）：+ 1：

+1、動的データを含むライブストリームウェブカメラを追加することは不可能です。

@ pkozlowski-オープンソースあなたがV2のコミュニティを捨てたので、Angularを気にしないので、私はもう興味がありません。 それに努力を無駄にすることには0ポイントがあります。

@ phillip-haydonその情報をありがとう。 node.jsで使用するフロントエンドフレームワークを調べていました。 私はこれまでV2の問題について聞いたことがありませんでした。 私と私のチームは、V1とV2の間の互換性をどのように壊しているかを理由に、React.jsを使用することにしました。 Pythonコミュニティでこの種の考え方が引き起こした大きな亀裂は、すべての人に教訓を与えたと思います。

：がっかり：

フィリップ・ヘイドンと@StevenDStanton @ -私はあなたが他のフレームワークに行くことを選択したことを聞いて申し訳ありませんが、もちろん、あなた自身の開発のためのその仕事は最高のツールを選択する必要があります。

ただし、明確にするために、AngularJSはコミュニティを捨てていません。実際、コミュニティは、進行中のAngular1.xの開発にこれまで以上に関与しています。 AngularJS 1.4.0のリリースが間近に迫っています。これは、これまでの大きなバージョン変更間の最短時間であり、これまで以上に多くのコミュニティメンバーがコアチームで作業しています。 このバージョンがリリースされたら、AngularJS 1.5に向けた開発を開始します。これは、2015年末までにリリースされるはずです（すべて同じです）。Google自体が文字通り何百もの本番環境でAngularJS1.xアプリケーションを使用していることも忘れないでください。たった今。 これらのアプリケーションが、アプリケーションとまったく同じように、存続期間または移行パスを持ち続けることを保証することは、Googleの利益になります。

Angular 2に関して-この開発努力は、コミュニティからのフィードバックによって正確に推進されています。 目的は、より大きく、より複雑なアプリケーションをサポートできる、より速く、より小さく、より堅牢なフレームワークを提供することです。 モバイルデバイスでのパフォーマンスを向上させるため。 そして、Webコンポーネントの透過的なサポートにより、Webブラウザの進化を引き続き受け入れます。

これを実現するために、インジェクターやコンパイラーの動作など、いくつかの基本的な構成要素を再考する必要があったため、AngularJS1.xに物事をボルトで固定し続けることはできませんでした。 その結果、AngularJSをこれまでと同じくらい人気があり信頼性の高いものにしたのと同じ高レベルの目標を推進し続けるだけでなく、今後何年にもわたって将来の証拠となるパスを提供できる、まったく新しいフレームワークが生まれました。

AngularJS1.xからAngular2に移行するためのターンキーアップグレードソリューションがない場合があります。これは事実です。 ただし、AngularJS1.xから完全に異なるフレームワークに移行するよりもAngularJS1.xからAngular2に移行する方が確かに簡単です。

ブラウザは、 <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);

@ tot-ra-ブラウザは<video>要素のsrc属性への変更を監視しているため、バージョンは機能すると思います。http ：

HTML5仕様から： http ：

要素がすでにビデオまたはオーディオ要素に挿入されている場合に、ソース要素とその属性を動的に変更しても効果はありません。 再生中のものを変更するには、メディア要素のsrc属性を直接使用し、canPlayType（）メソッドを使用して利用可能なリソースの中から選択することもできます。 一般に、ドキュメントが解析された後にソース要素を手動で操作することは、不必要に複雑なアプローチです。

これが意味するのは、ブラウザがソース要素を動的に変更するAngularJS（またはその他のこと）に対処することを期待できないということです。 代わりに、必要なのは、必要に応じて<video>タグのsrcプロパティの更新を処理するメディア固有のディレクティブです。 おそらく、 @ caitpのng-mediaライブラリに沿った何かです。

キャンセルされていないビデオのための要求と問題について、私たちは中のアイデアを@kaiqigongような何か実装できることを示唆しているhttps://github.com/angular/angular.js/issues/1352#issuecomment -58865425を。 おそらく、要素が破棄されているときにsrcを""に設定するvideo要素ディレクティブを追加できますか？

試すことができる他の潜在的なライブラリ：

• ngVideo
• videogular

登録を解除します。 ReactのためにAngularJSを離れます。 申し訳ありませんが、あなたのハードワークに感謝します。

ええ、いい考えです、私も購読を解除しています。 http://aurelia.io/用にAngularJSを捨てました

では、目前の技術的な問題に戻りましょう。

この問題で議論されている実際には2つの問題があります。

• <video>要素は、 <source>タグのsrc属性への変更を監視も反応もしません。 これはHTML5仕様の一部であるため、近い将来変更される可能性はほとんどありません。 これは、 ngSrc有無にかかわらず、 <source>要素を動的に指定する慣用的なAngularJSの方法を使用できないことを意味します。 つまり、 <video>要素は変更を取得しないため、 <source>タグのsrc属性で補間を使用することはできません。
• 場合によっては（ブラウザ）、 <video>要素がビデオを正しくダウンロードする要求をキャンセルせず、要素がDOMから削除されます。 これの効果は、アプリケーションがDOMを十分に迅速に変更し、 <video>タグを追加および削除して、ビデオをダウンロードする時間がない場合、新しい<video>状況で立ち往生する可能性があることです。 <video>要素からまだ保留中のビデオにアクセスしようとしています。 要素が破棄される前にsrc （またはcurrentSrc ？）属性が空の文字列（ "" ）に設定されている場合、ブラウザは実際にビデオリクエストをキャンセルするようです。

これらの問題はどちらも、AngularJS自体のバグではありません。 しかし、それは私たちがそれについて何かをすることができないという意味ではありません。

最初の問題について：
Angularまたはその他のフレームワークでこれを修正する唯一の方法は、HTML5仕様で説明されているように、動的に変化するソースを処理するJavaScriptを作成することです。 他の主要なフレームワークではこれに対する解決策を見たことがありませんが、AngularJSで最も魅力的な方法は、一連のディレクティブを作成することです。 これは事実上、次のプロジェクトの人々がやろうとしたことです。

• ngMedia
• ngVideo
• videogular

コミュニティの関心に応じて、Angular 1.5用にこれに似たものを開発し、それを独自のモジュールとしてパッケージ化することを検討できます（ ngCookiesパッケージ化方法と同様）。 1.5の計画を立てるときに、これをもう一度見てみましょう。 それまでの間、最善の解決策は、上記のライブラリの1つを実装し、ライブラリが機能するように支援することです。

2番目の問題について：
現時点では、これを個人的に再現することはできないようです。 私の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'、function（$ sce）{
戻り関数（recordingUrl）{
$ sce.trustAsResourceUrl（recordingUrl）;を返します。
};
}]）;

ビューファイル：
<audio src = "{{Your_URL | trustUrl}}"オーディオプレーヤーコントロール>オーディオ>

注：オーディオタグのスペースに注意してください

こんにちは、私はVideogularの作成者です。

@petebacondarwinが説明したように、これはAngularJSの問題ではありませんが、ほとんどの場合、HTML5でのビデオの動作とブラウザーがビデオ要求を処理する方法の問題です。 また、モバイルデバイスで動作させる必要がある場合は、さらに奇妙になります。

私はVideogularを使用してビデオとHTML5で多くの戦いをしましたが、すべてのブラウザーでシームレスに機能させるのは難しいと言わざるを得ませんが、不可能ではありません。

したがって、AngularJSチームの誰かがこれについて助けを求めている場合は、これに関する私の謙虚な知識を共有し、修正に貢献できれば幸いです。 これは本当に私を悩ませるものであり、Angular 2ではこれに問題はないので、両方のフレームワークで同様のアプローチをとることは素晴らしいことです。

+1

ビデオプレーヤーにディレクティブがある場合は、srcurl変数を監視して手動で更新できます。

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

İjsonを使用してdb内のURLビデオを解析しますが、機能しません（（（助けてください

再生ボタンをクリックすると、ビデオが上下逆に表示され、フルスクリーンを押すと、その位置に到達します。この問題に対する提案があります。

+1 srcまたはngSrcを使用しても、URLを解析することはできません。
このエラーは放棄されましたか？

私はこれと同じ問題を抱えていますまだ

このソリューションは非常にうまく機能します。

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