Question

我正在尝试在vuejs2上循环播放视频，我使用的是html5中的标准<video>标签。

我需要它循环的方式是，它在第一次执行后需要从17s循环到结束。

由于标准<video loop>从头开始，所以我发现自己尝试使用<video v-bind:onended="function_name_here">，但似乎不起作用。

我尝试了以下操作：

v-bind:onended="function()"
v-bind:onended="this.function()"
onended="this.function"
onended="function"

我非常确定function()内部没有问题，因为第一行是我在此处设置的console.log("success!")，以检查是否达到该功能。（我还通过在运行时通过控制台控制document.findElementById("mainVideo").onended进行了双重检查。

有人可以帮我吗？

P.S。如果您可以提供手动实现的替代方法（例如loopFrom），那就很好了，但是我也打算在非循环视频的结尾做一些事情，所以我仍然需要访问onended事件。 / p>

Answer 1

使用v-bind:ended代替v-bind:onended。

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  methods: {
    onEnd: function () {
      console.log('test on Ended')
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<video controls
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="620" @ended="onEnd()">

Sorry, your browser doesn't support embedded videos, 
but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a> 
and watch it with your favorite video player!

</video>
</div>

使用Vuejs2将功能附加到html5视频

1 个答案: