參考:http://www.reibang.com/p/23b03e11d902
參考:https://blog.csdn.net/qq_54879026/article/details/124232085
- 首先安裝依賴:npm install vue-video-player -S
- 此插件用到了sass相關(guān)依賴剖膳,所以需要安裝sass
- 我的node版本是v16.14.0召锈,踩了無數(shù)個sass版本的坑后,終于找到了對應(yīng)nodeV16版本的sass芬萍。
- 版本安裝錯誤時,卸載錯誤版本的sass
- npm uninstall node-sass
- npm uninstall sass-loader -D
- 然后安裝
- npm i sass-loader@10.2.0 -D
- npm i node-sass@6.0.1 -D
- 在mian.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>
<div class="userActionVideo">
<h1 class="title">遼寧省【繼教項目報名】</h1>
<h1 class="title">操作視頻</h1>
<div class="video">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</div>
</template>
<script>
export default {
name: "UserActionVideo",
data() {
return {
// 視頻播放
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,瀏覽器準備好時開始回放蕉斜。
muted: false, // 默認情況下將會消除任何音頻钮惠。
loop: false, // 導致視頻一結(jié)束就重新開始。
preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)猿推。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持)
language: "zh-CN",
aspectRatio: "16:9", // 將播放器置于流暢模式,并在計算播放器的動態(tài)大小時使用該值捌肴。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字(例如"16:9"或"4:3")
fluid: true, // 當true時蹬叭,Video.js player將擁有流體大小藕咏。換句話說,它將按比例縮放以適應(yīng)其容器秽五。
sources: [
{
type: "",
src: "https://mvw-cme-pro.oss-cn-beijing.aliyuncs.com/lning/templates/operate-video.mp4", //url地址
// src: "" //url地址
},
],
poster: "", //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: "此視頻暫無法播放孽查,請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true, //全屏按鈕
},
},
};
},
created() {},
methods: {},
};
</script>
<style lang="less" scoped >
.userActionVideo {
padding: 10px 10px 50px;
.title {
text-align: center;
}
.video {
margin-top: 20px;
}
}
</style>