使用 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 音频播放器