1

I have some code that I put into a jsfiddle with the intention of asking a different question here, but I found that the code doesn't work in jsfiddle for me.

Link to fiddle

<div ng-controller="MyCtrl">

  <video id='vid' preload="auto" controls class="video-js vjs-default-skin" preload="auto" vjs-video>
    <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
  </video>

  <textarea ng-model="playtime">
  </textarea>

</div>

    var myApp = angular.module('myApp', ['vjs.video']);

    function MyCtrl($scope) {
      $scope.playtime = 0;

      $scope.$on('vjsVideoReady', function(e, data) {
        $scope.vid = data.player;


        $scope.commands = {
          'play': function() {
            $scope.vid.play();
          },
          'pause': function() {
            $scope.vid.pause();
            $scope.playtime = 10;
          }
        };

        $scope.ay = annyang;
        $scope.ay.addCommands($scope.commands);
        $scope.ay.debug();
        $scope.ay.start();

      });


    }

The code in question is a simple Angular app that plays or pauses a video through speech commands, using the annyang library. The video is (supposed to be) rendered using the videojs library, using a default skin.

I followed a jsfiddle example on how to set up an Angular controller on jsfiddle, and I have included all the relevant libraries through the jsfiddle "External Resources". However, the fiddle does not seem to know any of my javascript exists. Voice commands aren't recognized, and the video isn't skinned. The code works in my main setup, but not in jsfiddle.

Thank you for your time. Any help is appreciated.

ep84
  • 315
  • 2
  • 17
  • Try this https://jsfiddle.net/xa9wewcq/51/ - I added `$scope.playtime = 999;` so you'll see the change in the textarea when you play the video, but I don't know what are you actually trying to do inside the event callback function – Alon Eitan Sep 03 '17 at 18:20
  • Thank you for your help. This fixes the speech recognition and video issues, which were my main issues for this question. Playtime didn't change in the textarea for me, but that's part of my next question. I'll post that soon. If you make an official answer, I'd be happy to pick it. – ep84 Sep 03 '17 at 18:31
  • 1
    You're absolutely right, the issue is that the event doesn't trigger a digest cycle, so I injected `$timeout` and now you'll see that it change to 999 exactly 2 seconds after the video is ready https://jsfiddle.net/xa9wewcq/52/ – Alon Eitan Sep 03 '17 at 18:44
  • I didn't know anything about these functionalities. Thank you for that! I guess I have one remaining question. How do I get the playtime to change when I give a speech command? Playtime should === 10 after I pause, but it doesn't seem to. – ep84 Sep 03 '17 at 19:11
  • I don't know unfortunately, I never used this directive and library, I just followed the documentation of implementing it using angularjs to fix the issues in your fiddle. Can you share a link to the relevant documentation of what you're trying to implement? – Alon Eitan Sep 04 '17 at 14:59
  • It's alright. I was able to get the answer in another question. For our reference, this is the question I made: https://stackoverflow.com/questions/46028088/how-do-i-change-an-angularjs-variable-i-declared-in-scope-using-annyang-speech/46028419#46028419 – ep84 Sep 05 '17 at 02:58

0 Answers0