Wildhoney / ngVideo

Modularised ~13KB HTML5 audio/video implementation using Angular.js
http://ng-video.herokuapp.com/
MIT License
227 stars 60 forks source link

Feedback not updating using vi-timeline when video is paused. #14

Open farazhassan opened 10 years ago

farazhassan commented 10 years ago

So, there is this stupid error. When I pause the video and use the vi-timeline directive to change the currentTime of the video, the content of the video is updated i.e the video is seeked to the new position BUT the values in the vi-feedback never change(the currentTime watch yields no result, and the labels dont show updated values either.

farazhassan commented 10 years ago

To see if it was an error on my part, I checked your demo, it works fine and now I have debugged it, its probably some scopes related issue since the play/pause functions are undefined when this problem occurs, I posted it anyways to check if anyone has any clue as to whats happening here?

Heres the code I'm using:

<div ng-controller="ngVideoController" ng-video>

  <div class="col-md-12 col-md-12-ingrain">
    <div class="col-md-10 col-md-10-ingrain video-element-container">
      <div class="col-md-12 col-md-12-ingrain video-background-layer">
        <div ng-show="isVideoAvailable">
            <section class="ng-video-container video-element">

              <!-- Base Directive -->
              <section class="video">
                  <!-- Screen Directive -->
                  <video vi-screen id="player"></video>

                  <section vi-controls class="controls" vi-feedback>
                      <span vi-controls-play title="Play" class="glyphicon glyphicon-play" ng-hide="playing"></span>
                      <span vi-controls-pause title="Pause" class="glyphicon glyphicon-pause" ng-show="playing"></span>
                      <span vi-playback-rate="0.033" title="Double Speed" class="glyphicon glyphicon-fullscreen"></span>
                  </section>

                  <!-- <section class="full-screen">
                      <span vi-playback-rate="0.03" title="Double Speed" class="glyphicon glyphicon-fullscreen"></span>
                      <span vi-playback-rate-increment="1">Increment by 1</span>
                      <span vi-playback-rate-decrement="1">Decrement by 1</span>
                      <span vi-playback-rate-normalise>Normalise</span>
                  </section> -->

                  <!-- Feedback Directive -->
                  <!-- <section vi-feedback class="feedback"> -->
                      <!-- Duration Directive -->
                      <!-- <section class="duration">
                          {{currentTime | number: 2}}s of {{duration | number: 2}}s
                          [{{percentagePlayed | number: 0}}%]
                          [Rate: {{playbackRate}}]
                      </section> -->

                      <!-- Timeline Directive -->
                      <!-- <section class="timeline">
                          <input vi-timeline />
                      </section> -->
                  <!-- </section> -->

              </section>

            </section>
          <!-- <section vi-feedback>
            <div id="ingrainCanvas" ng-controller="IngrainController" class="ingrain-canvas" ingrain-canvas></div>
          </section> -->
        </div>
      </div>
    </div>
    <div class="col-md-10 col-md-10-ingrain controls-container">
      <section class="video" ng-show="isVideoAvailable">
        <section vi-feedback class="feedback">
            <!-- Duration Directive -->
            <section class="duration">
                Fr#{{currentTime*30 | number: 0}} of {{duration*30 | number: 2}}s
                [{{percentagePlayed | number: 0}}%]
                [Rate: {{playbackRate}}]
            </section>

            <!-- Timeline Directive -->
            <section class="timeline">
                <input vi-timeline ng-disabled="playing"/>
            </section>
        </section>
      </section>
    </div>
  </div>

  <!-- <script type="text/javascript" src="/scripts/kinetic-v5.1.0.min.js"></script>
  <script type="text/javascript" src="/scripts/ad.js"></script> -->

</div>