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

现在我对VueJS了解得更多,这个解决方案看起来好多了:

jsfiddle工作

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();
  }
});

Answer 2

当我按照 saurabh 的建议创建小提琴时，我找到了“解决方案”（即使我无法提供准确的解释）。

当我们使用 VueJS 2 并且在实例化 Vue 类之前定义视频元素 var 时，就会出现问题。奇怪的是，相同的代码也适用于 VueJS 1：

视频无法播放。版本2.1.3

视频工作。版本 1.0.28

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

new Vue({
    el: "#app",
});

video.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
video.play();

如果 var 在 Vue 实例化之后定义，则一切都适用于版本 2。

jsfiddle.net/6qmjw5xd/1/

new Vue({
  el: "#app",
});

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

video.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
video.play();