定制HTML5视频播放器AngularJS控制 [英] Custom HTML5 video player controls with AngularJS

问题描述

我是新与AngularJS。我必须建立海关控制视频播放器（HTML5 ＆lt;视频＆GT; ）。
基本上，我会使用的getElementById（'myvideotag'），听上的视频进行播放/暂停点击。
我怎么可以和AngularJS做到这一点？结合与点击NG点击=videoPlayPause（）但后来，我怎么播放或暂停视频。我如何用经典方法＆lt;视频＆GT;

我想这是很简单的......我并没有得到所有AngularJS概念呢！

感谢您：）

呵呵，code ...视图：

 ＆lt;视频自动播放=自动播放preLOAD =自动NG点击=视频（）＆GT;
    ＆lt;信源SRC ={{current.url}}TYPE =视频/ MP4/＆GT;
＆LT; /视频＆GT;
 

在合适的控制器：

  $ scope.video =功能（）{
    this.pause（）; //？
}
 

解决方案

这个怎么样：

在你的HTML，设置 NG-点击=视频（$事件） （不要忘了 $事件参数），它调用下面的函数：

  $ scope.video =功能（E）{
    VAR videoElements = angular.element（e.srcElement）;
    videoElements [0] .pause（）;
}
 

我相信这是最简单的方法。

为angular.element

文档

此外，这可能会帮助你习惯角度：<一href=\"http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-emberjsor-other-client-mvc-framework-if-i-have-a\">How我认为AngularJS / EmberJS（或其他客户端MVC框架）如果我有一个jQuery的背景是什么？

I'm new with AngularJS. I must create customs controls for a video player (HTML5 <video>). Basically, I would use getElementById('myvideotag'), listen clicks on the video for play/pause. How I can do this with AngularJS ? Binding the click with ng-click="videoPlayPause()" but then, how I play or pause the video. How I use the classic methods of <video> ?

I guess it's really simple... I didn't get all the AngularJS concepts yet !

Thank you :)

Oh, the code... in the view:

<video autoplay="autoplay" preload="auto" ng-click="video()">
    <source src="{{ current.url }}" type="video/mp4" />
</video>

In the right controller:

$scope.video = function() {
    this.pause(); // ???
}

解决方案

How about this:

In your HTML, set ng-click="video($event)" (don't forget the $event argument), which calls the following function:

$scope.video = function(e) {
    var videoElements = angular.element(e.srcElement);
    videoElements[0].pause();
}

I believe this is the simplest method.

Documentation for angular.element

Also, this might help you get used to Angular: How do I "think in AngularJS/EmberJS(or other client MVC framework)" if I have a jQuery background?

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