vue中使用video-player无法播放视频

本篇是关于在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,有没有想要脱单的小伙伴,加入我们的脱单星球,认识更多优秀的小哥哥小姐姐

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页