本篇是关于在vue项目中使用video-player遇到的坑

本文分三个部分：

一：如何使用video-player

二：遇到的坑一

三：遇到的坑二

使用video-player

1. 先安装插件  

npm install video.js --save

npm install vue-video-player --save

2.在main.js中使用video-player

import VideoPlayer from 'vue-video-player'

Vue.use(VideoPlayer);

3.在vue项目中使用

<template>

     <div class="player-container">

            <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>

      </div>

</template>

script部分

//引入video样式

 import 'video.js/dist/video-js.css'

 import 'vue-video-player/src/custom-theme.css'

//配置

playerOptions: {

                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

                    autoplay: false, //如果true,浏览器准备好时开始回放。

                    controls: true, //控制条

                    preload: 'auto', //视频预加载

                    muted: false, //默认情况下将会消除任何音频。

                    loop: false, //导致视频一结束就重新开始。

                    language: 'zh-CN',

                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

                    sources: [{

                        type: 'video/mp4',

                        src: require("./2.mp4")

                        //src: 'src/views/sjsc/sjsc01_carInfoManage/2.mp4'//你所放置的视频的地址，最好是放在服务器上

                    }],

                    //poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）

                    width: document.documentElement.clientWidth,

                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。

           },

加入相应的文件即可使用！

坑1

新手刚使用时，一般会参考网上文章

网上很多文件引入css样式时，都会有这么一句

import videojs-contrib-hls.js/src/videojs.hlsjs

然后启动的时候一直保错，说是找不到相应文件，其实这个插件确实不能使用，重点是使用时并不需要！！！

安装时也会有这个命令npm install videojs-contrib-hls --save  也是不需要的！！！

坑2

重点来了。

新手使用时，一般引用的是本地视频

然后将相应的文件位置加入src中，如上述代码所示，结果不能播放

报上述的错误，后来发现问题是：

引入本地文件是，src应用require引入,如src: require("./2.mp4")

而不是//src: 'src/views/sjsc/sjsc01_carInfoManage/2.mp4'

终于可以顺利播放了！

你会用了吗？？

今天520，有没有想要脱单的小伙伴，加入我们的脱单星球，认识更多优秀的小哥哥小姐姐

特此声明，星球是免费的，但是创建星球的时候说是必须输入金额，所以只能先私聊，我再加你免费加入！