Vue.js如何绑定html5视频元素的playbackRate？

Question

如何绑定html5视频元素的playbackRate？不带getElementById的vuejs是否可以直接实现？

//Example of plain javascript
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;

Answer 1

如果要将其绑定到变量，以便在变量更改时，速率也可以更改，则可以使用简单的指令。

new Vue({
  el: 'main',
  data: {
    rate: 1
  },
  directives: {
    playbackRate(el, binding) {
      el.playbackRate = binding.value;
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<main>
  <video id="videoElement" controls poster="velocity-thumbnail.jpg" v-playback-rate="rate">
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)"> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)"> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4">
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm">
            <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
        </video>

  <div class="controls">
    <label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" v-model="rate"></label> <span aria-live="polite">{{rate}}</span>
  </div>
</main>