HTML 视频不使用 Vue.js 2 播放

Question

我的网络应用程序中有一个 HTML 视频:

<video src="" id="video-container" controls></video>

最初源是空的，我在加载一些数据后用 JS 动态更改它:

var video = document.getElementById('video-container');
...
video.src = VIDEO_URL;
video.play();

它曾经完美地工作并且与 Vue.js 1 兼容，但是，自从我迁移到 Vue.js 2 后，视频不再工作。调用 video.play()、video.pause() 对视频播放器没有影响，video.clientWidth 等属性返回零值。

这个元素在 Vue.js 2 中有没有不兼容的地方？我错过了什么吗？

谢谢!

Answer 1

编辑:请查看Chrome's Documentation在执行此操作之前强制播放视频。

现在我对 VueJS 有了更多的了解，这个解决方案似乎更好:

jsfiddle working

HTML

<div id="app">
  <video ref="videoRef" src="" id="video-container" width="100%" controls></video>
</div>

JS

new Vue({
  el: "#app",
  mounted: function() {
    this.$refs.videoRef.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
    this.$refs.videoRef.play();
  }
});