使用 Angular js 在屏幕上播放和暂停 html5 视频答案

【问题标题】：Play and Pause html5 video on screen click with angular js使用 Angular js 在屏幕上播放和暂停 html5 视频
【发布时间】：2016-05-10 07:45:29
【问题描述】：

我正在我的 Angular js 应用程序中播放一个 html5 视频。我希望视频能够在单击视频屏幕时暂停和播放。我已经能够使用一个功能来暂停或播放它，并且我希望能够根据视频是暂停还是正在播放来同时执行这两种操作。我已经尝试过 pausePlay() 功能，但它不起作用。我的代码如下所示：

HTML

<video style="width:100% !important; height:auto !important;" controls ng-click="video($event)" src="{{feeditem.feed[0].url | trustUrl}}"  type="video/mp4">

控制器中的功能

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

【问题讨论】：

控制台有错误吗？
没有错误，视频当前在屏幕触摸上暂停。我想要的是在屏幕触摸上暂停和播放。
应该启动视频的代码在哪里？
视频播放器中的播放按钮开始播放视频，我希望屏幕点击开始和暂停视频。
我一定是遗漏了什么，我只看到在您的事件处理程序中暂停视频的代码？

标签： javascript angularjs html html5-video

【解决方案1】：

尝试以下方法：

$scope.pauseOrPlay = function (ele) {
    var video = angular.element(ele.srcElement)[0];
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
};

您还可以显示/隐藏控件：

$scope.pauseOrPlay = function (ele) {
    var video = angular.element(ele.srcElement)[0];
    if (video.paused) {
        video.play();
        video.controls="controls";
        video.setAttribute("controls","controls")
    } else {
        video.pause();
        video.removeAttribute("controls")
    }
};

【讨论】：