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

В то время как я создавал скрипку, как предложил saurabh, я нашел «решение» (даже если я не могу дать точного объяснения).

Проблема возникает, когда мы используем VueJS 2, и определяем элемент видео var перед созданием класса Vue. Как ни странно, тот же код работает с VueJS 1:

Video not working. Vue 2.1.3

Video working. Vue 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(); 

Если переменная определена после Вью конкретизации, все работает с версией 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(); 

Answer 2

Теперь, когда я знаю больше о 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(); 
    } 
});