CODEWITHSUNDEEP
htmlvideovue.js
live2
live2

Reputation: 4265

Vue.js How I can bind the playbackRate of a html5 video element?

How I can bind the playbackRate of a html5 video element? Is this possible direct with vuejs without getElementById?

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

Upvotes: 2

Views: 1919

Answers (2)

Roy J
Roy J

Reputation: 43881

If you want to bind it to a variable so that when the variable changes, the rate changes, you can make a trivial directive.

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>

Upvotes: 6

Raymond Camden
Raymond Camden

Reputation: 10857

According to MDN (https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained), there is an event, ratechange, that is fired when the rate changes. So if you use v-on:ratechange="soandso", you can listen for that event. I created a codepen that demonstrates this. It uses a button to slow down the rate to 0.1. First, the 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>

And then the JS (I wrote this very quickly):

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

All I'm doing in using a quick console.log, but you could update a value in the data() block.

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

Upvotes: 2

Related Questions