首页 文章

HTML视频无法使用Vue.js 2播放

提问于
浏览 次
1

我的网络应用中有一个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中是否与此元素不兼容？我错过了什么吗？

谢谢！

html video vue.js

2 回答

  • 6

    现在我对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();
  }
});
    回复于
  • -1

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

    当我们使用VueJS 2并在实例化Vue类之前定义视频元素var时会出现问题 . 奇怪的是，相同的代码与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();

    如果在Vue实例化之后定义var，则一切都适用于版本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();
    回复于

相关问题