Vue中video.js的使用和:src绑定失效问题解决

Vue中video.js的使用和问题解决

一、安装

npm install --save-dev video.js
// 或者使用淘宝镜像
cnpm install --save-dev video.js

二、在main.js中引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

三、使用

<video id="videoPlay" Controls="true" Autoplay="true" width="80%">
            <source
                src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
                type="video/mp4"
            >
</video>

四、问题

如果使用:src绑定视频时，视频加载不出来。

【解决办法:】

使用原生的js,操作src属性，避免使用vue和jquery。

loadVideo(url) {
      document.getElementById("videoPlay").src = url;
}

五、视频静音的方法

document.getElementById("videoPlay").muted=true;