当 html5 视频结束时调用 AngularJS 控制器函数 [英] Calling AngularJS controller function when html5 video ends
问题描述
我的应用主页上有一个视频,当我启动它时会播放.当视频结束时,我想使用一些 CSS 3 过渡来移动页面.
<离子窗格><div class="home-video"><video autoplay="autoplay" ng-click="ctrl.video()" aria-label="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="您的浏览器不支持视频标签."></视频>
</ion-pane></ion-view>
在视频的最后,我希望能够调用 angularJS 控制器函数.
'use strict';angular.module('app', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {$stateProvider.state('home', {网址:/家",templateUrl: 'views/home.html',控制器:'homeCtrl 作为 ctrl'}).state('项目', {url: "/project/:projectId",templateUrl: 'views/project.html',控制器:'projectCtrl'});//要显示的默认视图$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.video = 函数 () {console.log("视频完成");}});
如果我将 console.log()
放在 <video onended="">
元素中,它会打印出来.如果我尝试调用包含相同 console.log 的 ctrl.video()
,我会收到以下错误:
Uncaught ReferenceError: ctrl is not defined
我知道 ctrl 是定义的,因为如果我添加一个 ng-click="ctrl.video()"
并单击它打印出来的视频播放器.
最终我所做的是使用 Angular UI Utils,它有一个通用的事件绑定器.这允许我绑定到一个 AngularJS 没有开箱即用的事件.使用以下行 ui-event="{ end : 'ctrl.video()'}"
我能够在视频结束时调用我的函数,这给了我想要的行为.
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>
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");
}
});
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:
Uncaught ReferenceError: ctrl is not defined
I know that ctrl is defined because if I add an ng-click="ctrl.video()"
and I click the video player it prints out.
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屋!