ep84
ep84

Reputation: 365

Videojs code won't work on jsfiddle

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.

Upvotes: 1

Views: 90

Answers (0)

Related Questions