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>

Answer 2

根据MDN（https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained），当费率发生变化时会触发一个事件ratechange。因此，如果您使用v-on：ratechange =＆＃34; soandso＆＃34;，您可以收听该事件。我创建了一个用于演示此功能的codepen。它使用一个按钮将速率减慢到0.1。首先，HTML：

<div id="app">
<button @click="test">test</button>
<video width="280" controls v-on:ratechange="vidRate" ref="vid">
<source src="https://www.apacara.com/media/video/myVideo.webm" type="video/webm" />
<source src="https://www.apacara.com/media/video/myVideo.mp4" type="video/mp4" />
<source src="https://www.apacara.com/media/video/myVideo.ogv" type="video/ogg" />
Your browser doesn't support HTML5 video tag.
</video>

</div>

然后JS（我写得非常快）：

const app = new Vue({
 el:'#app',
  methods:{
   test() {
    this.$refs.vid.playbackRate = 0.1;
  },
  vidRate() {
    console.log('called');
  }
 }
})

我正在使用快速console.log，但您可以更新data（）块中的值。

CodePen：https://codepen.io/cfjedimaster/pen/RxdqvG

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

2 个答案: