vue-video-player的使用

參考: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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末筝蚕,一起剝皮案震驚了整個濱河市卦碾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌起宽,老刑警劉巖洲胖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異坯沪,居然都是意外死亡绿映,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門腐晾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叉弦,“玉大人,你說我怎么就攤上這事藻糖⊙捅” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵巨柒,是天一觀的道長樱拴。 經(jīng)常有香客問我,道長洋满,這世上最難降的妖魔是什么晶乔? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮牺勾,結(jié)果婚禮上正罢,老公的妹妹穿的比我還像新娘。我一直安慰自己驻民,他們只是感情好翻具,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著回还,像睡著了一般裆泳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上懦趋,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天晾虑,我揣著相機與錄音疹味,去河邊找鬼仅叫。 笑死帜篇,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的诫咱。 我是一名探鬼主播笙隙,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼坎缭!你這毒婦竟也來了竟痰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤掏呼,失蹤者是張志新(化名)和其女友劉穎坏快,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憎夷,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡莽鸿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了拾给。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祥得。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蒋得,靈堂內(nèi)的尸體忽然破棺而出级及,到底是詐尸還是另有隱情,我是刑警寧澤额衙,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布饮焦,位于F島的核電站,受9級特大地震影響入偷,放射性物質(zhì)發(fā)生泄漏追驴。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一疏之、第九天 我趴在偏房一處隱蔽的房頂上張望殿雪。 院中可真熱鬧,春花似錦锋爪、人聲如沸丙曙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亏镰。三九已至,卻和暖如春拯爽,著一層夾襖步出監(jiān)牢的瞬間索抓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逼肯,地道東北人耸黑。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像篮幢,于是被迫代替她去往敵國和親大刊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348