1

我正在尝试在我的 AngularJS 项目中使用视频播放器（jwplayer）。这篇文章由两部分组成：第 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 回答