Question

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

Answer 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

的更多信息

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

HTML5视频/音频播放器控制播放＆amp;暂停AngularJS

2 个答案: