HTML video not playing with Vue.js 2

Question

I have an HTML video in my web app:

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

Initially the source is empty and I change it dynamically with JS, after loading some data:

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

That used to work perfectly and it was compatible with Vue.js 1 but, since I migrated to Vue.js 2 the video is no longer working. Calls to video.play(), video.pause() have no effect on the video player and attributes such as video.clientWidth returns zero values.

Is there any incompatibility with this element in Vue.js 2? Am I missing something?

Thanks!

Answer 1

Edit: Please check out Chrome's Documentation on force playing a video before implementing this.

Now that I know more about VueJS, this solution seems much better:

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