fix video position slider & playback crashes

src/components/Player.vue

@@ -4,8 +4,8 @@
       <canvas ref="canvas" id="player-canvas" :height="height" :width="width"></canvas>
     </div>
     <div>
-      <label for="posSlider">POS</label>
-      <input type="range" min="0" :max="frames - 1" value="0" class="slider" id="posSlider" v-model="position">
+      <!--suppress HtmlFormInputWithoutLabel -->
+      <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
     </div>
     <button @click="playPause">{{buttonLabel}}</button>
   </div>
@@ -60,6 +60,9 @@
     },
     methods: {
       playPause: function () {
+        if (this.frames === 0) {
+          return
+        }
         this.playing = !this.playing
         if (this.playing) {
           this.tmp_ctx = this.$refs.canvas.getContext('2d')
@@ -88,7 +91,10 @@
         this.$render()
         if (this.position < this.frames) {
           this.position += 1
-          requestAnimationFrame(this.$render_advance)
+          this.animation_id = requestAnimationFrame(this.$render_advance)
+        } else {
+          this.playPause()
+          this.position = 0
         }
       }
     }