HTML5视频结束时调用AngularJS控制器功能 [英] Calling AngularJS controller function when html5 video ends

问题描述

我有我的应用程序的主页的视频，当我启动它起着。当视频结束我再喜欢用一些CSS 3过渡到各地移动的页面。​​

I have a video on the homepage of my app which plays when I launch it. When the video ends I'd then like to use some CSS 3 transitions to move the page around.

<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控制器的功能。

At the end of the video I'd like to be able to call an angularJS Controller function.

'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();

});

我的控制器是这样的：

My controller looks like:

'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");

    }

});

如果我把一个的console.log（）在＆lt;视频onended =＆GT; 元素它打印出来。如果我试着和呼叫 ctrl.video（）它包含相同的console.log我收到以下错误：

If I put a console.log() in the <video onended=""> element it prints it out. If I try and call ctrl.video() which contains the same console.log I get the following error:

未捕获的Ref​​erenceError：CTRL没有定义

我知道CTRL定义，因为如果我添加一个 NG-点击=ctrl.video（）和我点击它打印出的视频播放器。

I know that ctrl is defined because if I add an ng-click="ctrl.video()" and I click the video player it prints out.

推荐答案

最后，我所做的就是使用的有一个通用的事件绑定角UI utils的。这让我绑定到AngularJS不开箱的事件。使用下面的行 UI事件={结束：ctrl.video（）'}我可以打电话给我的功能，当视频结束这给了我想要的行为。

Eventually what I did was use Angular UI Utils which has a generic event binder. This allowed me to bind to an event that AngularJS doesn't out of the box. Using the following line ui-event="{ ended : 'ctrl.video()'}" I was able to call my function when the video ended which gave me the desired behaviour.

这篇关于HTML5视频结束时调用AngularJS控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！