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

Posted

技术标签:

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

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

【问题讨论】:

所以您将有一个额外的按钮来执行此操作还是只有玩家选项? 你能提供迄今为止你尝试过的最少代码吗? 【参考方案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>

【讨论】:

以上是关于使用 AngularJS 控制 HTML5 视频/音频播放器的播放和暂停的主要内容,如果未能解决你的问题,请参考以下文章

通过 $http 服务使用 AngularJs 的 HTML5 音频播放器

仅在视频播放时进行视频控制 (html5)

AngularJS - ui-router - MVC 5 - html5mode

Youtube 的 HTML5 视频播放器如何控制缓冲?

Safari 画中画 - 自定义 HTML5 视频控制器

控制 HTML5 视频中的播放开始位置和持续时间