作者：lesdom
鏈接：http://www.reibang.com/p/23b03e11d902
來源：簡書
著作權(quán)歸作者所有匙头。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
有修改，我把我自己寫的代碼粘貼到上面了，只是為了我自己以后看明白 哈哈潘懊，轉(zhuǎn)載的內(nèi)容只是轉(zhuǎn)載基协，方便以后查看
安裝
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(); //關(guān)閉彈窗視頻暫停方法
}
}
};
</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: "系統(tǒng)演示視頻.mp4",
value: "video/",
}
];
for (let i in vList) {
let ar = [];
ar = vList[i].description.split(".");
this.$set(this.videoList, i, {
sources: [
{
src: "/assets/系統(tǒng)演示視頻.mp4"
// vList[i].value +
// vList[i].description,
// type: "video/mp4"
}
],
notSupportedMessage: "此視頻暫無法播放洋措，請稍后再試",
controls: true,
preload: "auto",
poster: "",
title: ar[0]
});
}
//關(guān)閉視頻方法
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;
}
}
樣式問題
在某個頁面蜘渣，視頻的一些按鈕無法顯示淌铐，而是長方形的邊線框。在網(wǎng)上并沒有相關(guān)的問題蔫缸，極少數(shù)相同的問題也無法解決腿准。
原因： 項目頁面上本身的樣式影響到了視頻的樣式。
解決：當你換一個頁面拾碌，或者將視頻獨立放在最外面的標簽吐葱，樣式就不會有問題。也就是說校翔，將視頻與其他部分獨立開弟跑，不受其他標簽樣式的影響。
支持格式
其他格式可能需要額外實現(xiàn)
type: "video/webm",
type: "video/ogg",
type: "video/3gp",
type: "video/mp4",
騰訊視頻地址獲取方法
1防症、點擊進入視頻播放
2孟辑、利用快捷鍵“F12”打開開發(fā)人員工具，然后選擇“network”欄目蔫敲，然后選擇“media”
3饲嗽、以上設(shè)置完成后我們按一下“F5”鍵刷新當前頁面，這時候開發(fā)工具就會抓取頁面調(diào)用的信息奈嘿，我們找到最大內(nèi)存的鏈接點擊右鍵選擇“open link in new tab”打開貌虾。
