title: How to bind the paused attribute of video element in vue.js to a function which can display/hide play button
body: <p>We need to display the play button on video window if video is paused even if video buffer has enough data (this will happen in safari browser as Safari doesn't allow to play the videos without user intervention). I added event listener for pause event. The code is as given below (please note that this is .vue file)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app" @keydown="handleKey($event)"&gt;
          &lt;video ref="videoRef" src="" id="videoID" width="100%" v-on:pause="onVideoPause"&gt;&lt;/video&gt;
          &lt;div id="videoCC"&gt;&lt;/div&gt;
          &lt;button type="button" id="playVideo" v-on:click="onClickCallback"&gt;&lt;img :src="require('@/assets/playVideo.png')"&gt;&lt;/button&gt;
          &lt;router-view tabindex="1"&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  export default {
      name: 'app',
  methods: {
      onClickCallback: function () {
          console.log('onClickPlayback is called')
          let videoPlayer = player.instance()
          videoPlayer.play()
          videoPlayer.setLogLevel(4) // Set Log level to debug
  
          let playVideoBtn = document.getElementById('playVideo')
          // Video is playing. Hide the play button
          if (playVideoBtn.style.display === 'block') {
              playVideoBtn.style.display = 'none'
          }
      },
      onVideoPause: function () {
          console.log('video is paused')
          let videoEl = document.getElementById('videoID')
          if ((videoEl.readyState &gt; 2) &amp;&amp; (videoEl.ended === false)) {
              console.log('video buffer has the data and video is not ended')
              document.getElementById('playVideo').style.display = 'block'
          }
      }
  }
  </code></pre>
  
  <p>Basically when video is paused, onVideoPause() is getting called and if video is not ended, I am displaying the play button. In the click handler of the play button, I am playing the video and hiding the play button, But we faced below problem while testing with javascript console as below.</p>
  
  <p>Video is playing. Used pause() from javascript console.</p>
  
  <pre><code>document.getElementById('video').pause()
  </code></pre>
  
  <p>Play button displayed but when we play() now from console, the button is not getting hidden as we are hiding the play button in click function of play button only. When I suggested we will add event listener for play also on video element, my reviewer suggested me to evaluate if we can do v-bind for the 'paused' attribute of video element.</p>
  
  <p>If we can bind the paused attribute and if we can call a function when ever the value changes, we can do the hiding and display in that function. I am not able to figure out how can we bind the attribute and call the function whenever the value changes as v-bind only works with single expression. I am new to vue.js. Can any one please help me if this is possible with v-bind or with any other Vue directives?</p>