HTML5视频/音频播放器通过AngularJS控制播放和暂停

I want to control HTML5 audio/video player with AngularJS. I want to play & pause that player. I can do this using jQuery. But I need it to work with AngularJS.

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

2 个解决方案

#1

https://github.com/2fdevs/videogular
creating your own custom directive can does the job for you (Preferred and reusable),

创建自己的自定义指令可以为您完成工作(首选和可重用),

The simplest way is using angular.element and selecting the required video element from the DOM using its functionalities.

最简单的方法是使用angular.element并使用其功能从DOM中选择所需的视频元素。
```
 <video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()">
 <source src="{{url }}" type="video/mp4" />
 </video>
```
//controller
```
 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()
   }
}
```

more about angular.element https://docs.angularjs.org/api/ng/function/angular.element

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

#2

I hope this is useful for you (change the domain name and the filename properly)

我希望这对你有用(正确更改域名和文件名)

 <!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>

#1

https://github.com/2fdevs/videogular
creating your own custom directive can does the job for you (Preferred and reusable),

创建自己的自定义指令可以为您完成工作(首选和可重用),

The simplest way is using angular.element and selecting the required video element from the DOM using its functionalities.

最简单的方法是使用angular.element并使用其功能从DOM中选择所需的视频元素。
```
 <video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()">
 <source src="{{url }}" type="video/mp4" />
 </video>
```
//controller
```
 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()
   }
}
```