Question

如果视频暂停，即使视频缓冲区有足够的数据，我们也需要在视频窗口上显示播放按钮（这将在Safari浏览器中发生，因为Safari不允许在没有用户干预的情况下播放视频）。我为暂停事件添加了事件监听器。代码如下（请注意，这是.vue文件）

<template>
    <div id="app" @keydown="handleKey($event)">
        <video ref="videoRef" src="" id="videoID" width="100%" v-on:pause="onVideoPause"></video>
        <div id="videoCC"></div>
        <button type="button" id="playVideo" v-on:click="onClickCallback"><img :src="require('@/assets/playVideo.png')"></button>
        <router-view tabindex="1"></router-view>
    </div>
</template>

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 > 2) && (videoEl.ended === false)) {
            console.log('video buffer has the data and video is not ended')
            document.getElementById('playVideo').style.display = 'block'
        }
    }
}

基本上当视频暂停时，onVideoPause（）被调用，如果视频没有结束，我正在显示播放按钮。在播放按钮的点击处理程序中，我正在播放视频并隐藏播放按钮，但我们在使用javascript控制台进行测试时面临以下问题。

正在播放视频。从javascript控制台使用pause（）。

document.getElementById('video').pause()

显示播放按钮，但是当我们现在从控制台播放（）时，按钮没有被隐藏，因为我们只在播放按钮的点击功能中隐藏了播放按钮。当我建议我们也会在视频元素上添加事件监听器时，我的评论员建议我评估一下我们是否可以对已经暂停的＆＃39;进行v-bind。视频元素的属性。

如果我们可以绑定暂停属性，并且如果我们可以在值改变时调用函数，我们可以在该函数中进行隐藏和显示。我无法弄清楚如何绑定属性并在值发生变化时调用函数，因为v-bind仅适用于单个表达式。我是vue.js的新手。如果使用v-bind或任何其他Vue指令可以帮助我吗？

Answer 1

双向绑定的一般技术是：

在greṕ阶段，您在元素上安装事件侦听器以更新绑定值
在$ grep "^$|V|\|runtime$" foo |V| runtime阶段，您将绑定值移动到元素中。

在您的情况下，您希望收听bind和update个事件，并相应地设置一个playing变量。（pause只是playing）

在下面的示例中，我将控件保留在视频播放器上，并添加我自己的控件。您可以使用任一控件，它们保持同步。（你还应该删除paused阶段的事件监听器。我没有这样做，因为它有点乱，我想让这个例子保持简洁和简单。）

!playing

unbind

Answer 2

我的评论员建议我评估一下我们是否可以进行v-bind ＆＃39;暂停＆＃39;视频元素的属性

这个问题的答案是＆＃34;没有＆＃34;。视频元素不是Vue实例，因此其属性不具有反应性。您必须依靠事件来检测更改。我在另一个答案中演示了双向绑定。这是另一种在编码方面稍微简单一些的方法。

＆＃13;

new Vue({
  el: 'main',
  data: {
    videoElement: null,
    paused: null
  },
  methods: {
    updatePaused(event) {
      this.videoElement = event.target;
      this.paused = event.target.paused;
    },
    play() {
      this.videoElement.play();
    },
    pause() {
      this.videoElement.pause();
    }
  },
  computed: {
    playing() { return !this.paused; }
  }
});

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<main>
  <video id="videoElement" controls poster="velocity-thumbnail.jpg"
  @canplay="updatePaused" @playing="updatePaused" @pause="updatePaused">
      <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">
    <button v-show="paused" @click="play">&#9654;</button>
    <button v-show="playing" @click="pause">&#9208;</button>
  </div>
</main>

＆＃13;

如何将vue.js中视频元素的暂停属性绑定到可以显示/隐藏播放按钮的函数

2 个答案: