HTML5 video/audio player control play & pause with AngularJS

后端未结

关注

 2  1698

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.

相关标签:

2条回答

既然无缘

2021-01-03 08:32

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>

0 讨论(0)

夕颜

2021-01-03 08:33
- 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.
```
 <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
0 讨论(0)
发布评论:

提交评论
- 加载中...