与 Videogular 指令交互——如何操作？答案

【问题标题】：Interacting With the Videogular Directive -- How To Do So?与 Videogular 指令交互——如何操作？
【发布时间】：2013-12-31 15:43:59
【问题描述】：

我正在使用https://github.com/2fdevs/videogular，而且开箱即用，特别是效果很好。

<videogular vg-width="videoWidth" vg-height="videoHeight" >
    <video class='videoPlayer' ng-model="currentVideo">
        <source ng-src='{{currentVideo.videoLocation}}' test="{{currentVideo}}" type='video/ogg'></source>
    </video>
</videogular>

我不确定如何让视频以编程方式播放，比如自动播放不正确？我知道我可以在包含上述标记的控制器中调用angular.element()，然后调用.play()，但从我读到的内容来看，这似乎是错误的。我不应该在任何控制器内调用angular.element()。

我该怎么办？我应该创建一个执行此操作的指令吗？放置“播放”和“暂停”视频逻辑的最佳位置在哪里（fwi，我想在屏幕上显示两个视频，一旦第一个视频结束，做一些事情然后玩第二个）。

【问题讨论】：

正如你所说，你不应该在控制器中进行任何 DOM 操作，而是应该在指令中处理，这取决于你的场景和 videogular 提供的内容，创建一个“插件”可能是最简单的" 对于 videogular，修改现有的 videogular 指令（这里的问题是您必须合并更改才能更新到新版本）或创建自己的指令，使用“require”从 videogular 获取控制器。

标签： javascript angularjs angularjs-directive videogular

【解决方案1】：

昨天我们公开了可通过 $scope 访问的 API，因此您可以访问所有可用的方法。

您可以查看 API here。

此版本尚未通过 bower 提供，我们计划在本周末发布。

更新

了解视频何时完成的最佳方法是在控制器中添加范围函数。

$scope.onCompletePlayer1 = function() {
    console.log("on complete 1");
};

$scope.onCompletePlayer2 = function() {
    console.log("on complete 2");
};

然后在您的 HTML 中添加您的 videogular 指令中的这些函数。

<videogular vg-complete="onCompletePlayer1()" ...></videogular>
<videogular vg-complete="onCompletePlayer2()" ...></videogular>

最后在videogular.js中添加vg-complete作为$scope函数：

\\Line 159
vgComplete: "&" 

\\Line 507
$scope.onComplete = function(event) {
    vg.setState(VG_STATES.STOP);
    $scope.$emit(VG_EVENTS.ON_COMPLETE);
    $scope.vgComplete();
    $scope.$apply();
};

我们将尝试在下一个版本中添加此功能，因此您可能需要等待几天。

【讨论】：

你有我如何做到这一点的例子吗？通过 $scope 访问是什么意思？
顺便说一句，当我用 repo 上的那个更新我的 videogular.js 文件时，它忽略了我的宽度和高度设置。
我们已经推送了一个包含您需要的新版本，只需查看 Github 项目最新版本中提供的示例即可。