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

Question

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

我需要它循环的方式是，在第一次执行后，它需要从 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通过在运行时控制via 控制台进行了双重检查 。

谁能帮我这个？

PS 如果您可以提供手动实现的替代方法（例如 loopFrom），那非常好，但我也计划在非循环视频的末尾做一些事情，所以我仍然需要访问该onended事件。

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>