html - Vue.js 如何绑定(bind) html5 视频元素的播放速率？

Question

如何绑定(bind) html5 视频元素的播放速率？没有 getElementById 可以直接使用 vuejs 吗？

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

Answer 1

如果你想把它绑定(bind)到一个变量上，这样当变量改变时，速率也会改变，你可以做一个简单的指令。

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>