使用 AngularJS 控制 HTML5 视频/音频播放器的播放和暂停答案

【问题标题】：HTML5 video/audio player control play & pause with AngularJS使用 AngularJS 控制 HTML5 视频/音频播放器的播放和暂停
【发布时间】：2015-09-03 03:29:56
【问题描述】：

我想用 AngularJS 控制 HTML5 音频/视频播放器。我想播放和暂停该播放器。我可以使用 jQuery 来做到这一点。但我需要它与 AngularJS 一起工作。

【问题讨论】：

所以您将有一个额外的按钮来执行此操作还是只有玩家选项？
你能提供迄今为止你尝试过的最少代码吗？

标签： javascript jquery angularjs html

【解决方案1】：

https://github.com/2fdevs/videogular

创建您自己的自定义指令可以为您完成这项工作（首选且可重复使用），

最简单的方法是使用 angular.element 并使用其功能从 DOM 中选择所需的视频元素。

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

//控制器

function myCtrl($scope) {
   $scope.url = "url of video or audio"
   $scope.pauseOrPlay = function(ele){
     var video = angular.element(ele.srcElement);
     video[0].pause(); // video.play()
   }
}

更多关于 angular.element https://docs.angularjs.org/api/ng/function/angular.element

【讨论】：

【解决方案2】：

希望对你有用（正确更改域名和文件名）

 <!DOCTYPE html> 
    <html>
    <head>
    <title>Video  Demo </title> 
    </head>

    <body>

    <video id="video" controls> 
        <source src=http://your_domain_source/video.webm type=video/webm> 
        <source src=http://your_domani_source/video-canvas-magic/video.ogg type=video/ogg> 
        <source src=http://your_domain_source/demos/video-canvas-magic/video.mp4 type=video/mp4> 
    </video> 
    <p>controls :</p>
    <button onclick="playVideo();" style="cursor: pointer;">Play</button>

    <button onclick="pauseVideo();" style="cursor: pointer;">Pause</button>

    <button onclick="rewindVideo();" style="cursor: pointer;">
      Back to beginning</button>
      <script>
        video = document.querySelector("#vid");

    function playVideo() {
      video.play();
    }
    function pauseVideo() {
      video.pause();
    }

    function rewindVideo() {
      video.currentTime = 0;
    }
    </script>
    </body>
    </html>

【讨论】：