HTML5 video/audio player control play & pause with AngularJS

javascript jquery angularjs html

28,054

Solution 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.

 <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

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

28,054

Author by

Bilash

I'm working on JavaScript Stack development solutions for Cloud based Web APP - using node.js and many of its modules along with MEAN.IO - I'm a MEAN Stack developer as well with high quality pattern of development structure alongside of AWS (Amazon Web Service) experience. Data binding and deep JS data structure and MVC JS development with using AngularJS. Provide JS Stack node.js solutions using - --ExpressJS --MongoDB --Socket.IO --AngularJS --BackboneJS --UnderscoreJS And more JS dependency node modules along with JS beautifier JSHint and task runner GruntJS. I'm providing JavaScript Stack based Cloud app (MEAN) and mobile solution (PhoneGap / Cordova) with comprehensive client satisfaction. I provide a high quality of hybrid/cross-platform cordova HTML5 based mobile application around all possible platform (Android/iOS/WindowsPhone) using a lot of JavaScript and CSS framework , such as Ionic Framework, SenchaTouch, AngularJS with using Bootstrap/Foundation/Less framework for cross-webview compatibility. I love NoSQL (MongoDB particularly) along side of strong SQL - I have a great knowledge of full SQL (particularly MySQL) and along side all of them.

Updated on December 20, 2020

Comments

Bilash over 3 years

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.