1

AngularJS プロジェクト内でビデオ プレーヤー (jwplayer) を使用しようとしています。この投稿は 2 つのパートで構成されています。パート 1 は背景、パート 2 は私の質問です。ありがとう。

パート 1: 「プレーヤーの読み込みエラー: 再生可能なソースが見つかりません」の問題を解決する。

最初はビデオが表示されず、ページ UI に黒い四角形が表示されるだけで、「適切なプレイヤーが見つかりませんで、フォールバックが有効になっています」という非常に誤解を招くコンソール メッセージが表示されます。

数時間後、たまたま jwplayer のサイズ設定を「height:450, width:800」から「height:'100%', width:'100%'」に変更しました。今度は、jwplayer はページ ui にメッセージを表示します:「プレーヤーの読み込み中にエラーが発生しました: 再生可能なソースが見つかりません」。

それは私に方向性を与えます。私の jwplayer の使用法は次のようになります。

<!-- this is my index.html -->
<div id="jw_container">Loading the player ...</div>
<script>
    var player = jwplayer("jw_container").setup({
        file:"{{model.my_video.video_url}}",
......

そのファイル行をハードコーディングされた絶対ビデオ URL に変更すると機能し、それが実際の問題であることを示しています。だから最終的に私は得た：

file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,

今のところ、問題は解決しました。（しかし、私の意見では、まだ醜く、直感的ではありません。）

================================ セパレーター ================= ==

パート 2: 私の本当の質問

従来のテンプレート エンジンの世界から来た人は、好きな場所で {{...}} を使用する傾向があるかもしれません。しかし、AngularJS では状況が異なります。

上記の例に加えて、これは以前に私を悩ませた別の例です。

<img title="{{my_title}}" src='logo.png'> <!-- This works -->
<img src="{{my_image}}"> <!-- This doesn't. Use ng-src instead. -->

一般的に、AngularJS ビュー ファイル内で {{...}} を使用する場合と使用しない場合はいつでしょうか?

4

4 に答える 4

3

パート 1 のみ: jwplayer と Angular を使用している場合は、Angular から jwplayer を呼び出すことを強くお勧めします。

例えば

myModule.controller('MyController', function ($scope, stuffINeed) {
    jwplayer.key = "myKey";
    jwplayer("myElement").setup({
                file: "MyFileName"
            });

jwplayer.js が読み込まれている限り (index.html にリンクするか、require.js のようなものを使用してください)、準備は完了です!

于 2013-10-15T16:54:24.123 に答える
1

Jw Player をディレクティブとしてラップします。次のようなものを使用できます: https://github.com/ds62987/angular-jwplayer

于 2014-02-02T22:12:22.610 に答える
0

このトピックについて自分の考えを述べようとしています。

ルール #1: {{...}}AngularJS の<script>...</script>タグ内には絶対に記述しないでください。単純に、AngularJS のテンプレート システムがそのように機能しないためです。代わりに、これを使用します。

//This is the usage in the view
angular.element(document.getElementById('the_id')).scope().foo

または、ビュー ファイルで追加のヘルパーを定義することもできます。

//This is another usage in the view
function bar(foo) {
    //do something with foo
}

次に、コントローラーファイルを介して「通常の」方法でモデルを使用します。

//This is inside controller file
function YourCtrl($scope) {
    bar($scope.foo);
}

それだ。

それでも、ビューの html 部分内で {{...}} をいつ、いつ使用しないかはまだわかりません。この部分は、他の誰かが回答するようにしておきます。(私は今、第 2 週で新しい AngularJS 学習者に過ぎません。)

于 2012-12-13T06:00:20.210 に答える
0

編集：テストプランカーを追加しました：http://plnkr.co/edit/BMGN4A

完全な例を提供できますか? 私は以下のように書いていますが、コントローラーCannot read property 'videoUrl' of undefinedにあるのにメッセージが表示されるためです。$scope.videodata.videoUrl = "bla bla";

<script type="text/javascript">
    jwplayer("myElement").setup({
        file: angular.element(document.getElementById('myElement')).scope().videodata.videoUrl,
        image : "http://i3.ytimg.com/vi/2hLo6umnjcQ/mqdefault.jpg",
        autostart : "false",
        id : 'playerID',
        width: '700px',
        height: '400px',
        primary : "flash",
        stretching : "uniform",
        modes : [{
            type : 'html5'
        }, {
            type : 'download'
        }, {
            type : 'flash',
            src : 'player.swf'
        }]
    });
</script>
于 2013-09-18T18:42:45.727 に答える