作者：lesdom
链接：https://www.jianshu.com/p/23b03e11d902
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
有修改，我把我自己写的代码粘贴到上面了，只是为了我自己以后看明白 哈哈，转载的内容只是转载，方便以后查看
安装
npm install vue-video-player -S
配置
main.js
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
使用 编写组件
<template>
<!-- <video-->
<!-- ref="videoPlayBackPlugin"-->
<!-- class="video-js vjs-default-skin w-100 h-100"-->
<!-- >-->
<!-- <source ref="videoPlayBackPluginSource" />-->
<!-- </video>-->
<!-- class="video-player vjs-custom-skin"-->
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
style="width: 100%;height: 100%"
/>
</template>
<script>
export default {
props: ["videoItem"],
data() {
return {
// 视频播放
playerOptions: {}
};
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
},
mounted() {
this.playerOptions = this.videoItem;
},
methods: {
onPlayerPause() {
this.$refs.videoPlayer.dispose(); //关闭弹窗视频暂停方法
}
}
};
</script>
<style lang="scss">
.video-js {
.vjs-big-play-button {
/*top: 50%;*/
/*left: 50%;*/
transform: translate(-50%, -50%);
}
}
</style>
引用组件重新赋值视频地址
<!-- 视频dialog-->
<el-dialog
:title="videoItem.title + '操作详解'"
:visible.sync="videodialog"
v-dialog-drag
:before-close="handleClick"
>
<videoPlayer
class="view"
ref="video"
:videoItem="videoItem"
:key="DataTimes"
/>
</el-dialog>
//引用组件
import videoPlayer from "@/components/VideoPlayer/index";
components: { videoPlayer },
videoItem: {}, //视频组件传值所用 在data中
//this.playerOptions['sources'][0]['src'] = '接口地址';
//赋值
let vList = [
{
description: "系统演示视频.mp4",
value: "video/",
}
];
for (let i in vList) {
let ar = [];
ar = vList[i].description.split(".");
this.$set(this.videoList, i, {
sources: [
{
src: "/assets/系统演示视频.mp4"
// vList[i].value +
// vList[i].description,
// type: "video/mp4"
}
],
notSupportedMessage: "此视频暂无法播放，请稍后再试",
controls: true,
preload: "auto",
poster: "",
title: ar[0]
});
}
//关闭视频方法
handleClick() {
this.$refs.video.onPlayerPause();
this.videodialog = false;
},
//演示视频的格式样式
<div class="yanShiShiPin">
<div v-for="(item, index) in videoList" :key="index">
<div class="videoitem" @click="videoImgCli(item)">
<div class="itemtext2">
<div class="h-50">{{ item.title }}</div>
<div class="h-50">操作详解</div>
</div>
</div>
<div class="video_bottom_title">{{ item.title }}操作详解</div>
</div>
</div>
//视频点击
videoImgCli(data) {
this.DataTimes = Date.now();
this.videoItem = data;
this.videodialog = true;
},
.yanShiShiPin {
padding-top: 10px;
padding-bottom: 10px;
height: calc(100% - 490px);
display: flex;
align-items: center;
justify-content: left;
.videoitem {
width: 290px;
height: 178px;
margin: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: url("/assets/video_back.png");
.itemtext2 {
text-align: justify;
text-justify: newspaper;
word-break: break-all;
color: #ffffff;
height: 50px;
font-size: 22px;
text-align: center;
}
}
.video_bottom_title {
height: 50px;
width: 300px;
text-align: center;
line-height: 50px;
font-size: 16px;
}
}
样式问题
在某个页面，视频的一些按钮无法显示，而是长方形的边线框。在网上并没有相关的问题，极少数相同的问题也无法解决。
原因： 项目页面上本身的样式影响到了视频的样式。
解决：当你换一个页面，或者将视频独立放在最外面的标签，样式就不会有问题。也就是说，将视频与其他部分独立开，不受其他标签样式的影响。
支持格式
其他格式可能需要额外实现
type: "video/webm",
type: "video/ogg",
type: "video/3gp",
type: "video/mp4",
腾讯视频地址获取方法
1、点击进入视频播放
2、利用快捷键“F12”打开开发人员工具，然后选择“network”栏目，然后选择“media”
3、以上设置完成后我们按一下“F5”键刷新当前页面，这时候开发工具就会抓取页面调用的信息，我们找到最大内存的链接点击右键选择“open link in new tab”打开。
