在 html5 视频结束时调用 AngularJS 控制器函数

Calling AngularJS controller function when html5 video ends

本文关键字：AngularJS 控制器 函数 调用 html5 视频 结束      更新时间：2023-09-26

我的应用程序主页上有一个视频，当我启动它时会播放。当视频结束时，我想使用一些 CSS 3 过渡来移动页面。

<ion-view  hide-back-button="true" title="">
    <ion-pane>
        <div class="home-video">
            <video autoplay="autoplay" ng-click="ctrl.video()" aria-label="video of IBM logo" tabindex="-1" aria-hidden="true" poster="images/Hero_Final_Placeholder.gif" onended="ctrl.video()">
                <source src="videos/video.mp4" type="video/mp4">
                <img src="images/video_backup.gif" title="Your browser does not support the video tag.">
            </video>
        </div>
    </ion-pane>
</ion-view>

在视频的最后，我希望能够调用一个angularJS控制器函数。

'use strict';
angular.module('app', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
  url: "/home",
  templateUrl: 'views/home.html',
  controller: 'homeCtrl as ctrl'
}).state('project', {
  url: "/project/:projectId",
  templateUrl: 'views/project.html',
  controller: 'projectCtrl'
});
 // Default view to show
$urlRouterProvider.when('', '/home');
}).run(function ($http, pouchDB, replicationService, $rootScope) {
  replicationService.replicate();
});

我的控制器如下所示：

'use strict';
var app = angular.module('app', false);
app.controller('homeCtrl', function ($rootScope){
this.data = {};
var ctrl = this;
    this.video = function () {
        console.log("video done");
    }
});

如果我在<video onended="">元素中放一个console.log()，它会打印出来。如果我尝试调用包含相同控制台的ctrl.video().log则会出现以下错误：

Uncaught ReferenceError: ctrl is not defined

我知道 ctrl 是定义的，因为如果我添加一个ng-click="ctrl.video()"并单击视频播放器，它会打印出来。

最终我所做的是使用具有通用事件绑定器的Angular UI Utils。这允许我绑定到 AngularJS 开箱即用的事件。使用以下行ui-event="{ ended : 'ctrl.video()'}"，我能够在视频结束时调用我的函数，这给了我所需的行为。

我对 Angular 有点陌生，所以我不知道修复它的最佳方法，但我至少可以告诉你为什么它不起作用。

ng-click="ctrl.video()"工作是因为 ctrl 是在控制器的作用域中定义的。所有 ng- 属性都在控制器的范围内运行。但是onend是一个常规的内置HTML5事件处理程序属性，因此它在全局Javascript范围内运行，而不是控制器的作用域。那里没有定义 ctrl。

（我不确定var ctrl = this;如何导致在控制器的作用域中定义 ctrl，但显然确实如此。还在学习棱角...

相关文章：