欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用video插件vue-video-player的示例

 更新時間:2020年10月03日 10:10:58   作者:guo&qi  
這篇文章主要介紹了vue使用video插件vue-video-player的示例,幫助大家更好的理解和使用vue插件,感興趣的朋友可以了解下

一、安裝插件

npm install vue-video-player --save

二、配置插件

  在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)

三、使用插件

  在vue組件中的程序如下:

<template>
  <!--在視頻外面加一個容器-->
  <div class="input_video">
  <video-player class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
  ></video-player>
  </div>
</template>
<script>
  export default {
    name : 'BusImg',
    data () {
      return {
        // 視頻播放
        playerOptions : {
          playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可選擇的播放速度
          autoplay : false, //如果true,瀏覽器準備好時開始回放。
          muted : false, // 默認情況下將會消除任何音頻。
          loop : false, // 視頻一結(jié)束就重新開始。
          preload : 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持)
          language : 'zh-CN',
          aspectRatio : '16:9', // 將播放器置于流暢模式,并在計算播放器的動態(tài)大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數(shù)字(例如"16:9"或"4:3")
          fluid : true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。
          sources : [ {
            type : "",
            src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
          } ],
          poster : "", //你的封面地址
          // width: document.documentElement.clientWidth,
          notSupportedMessage : '此視頻暫無法播放,請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
          controlBar : {
            timeDivider : true,//當前時間和持續(xù)時間的分隔符
            durationDisplay : true,//顯示持續(xù)時間
            remainingTimeDisplay : false,//是否顯示剩余時間功能
            fullscreenToggle : true //全屏按鈕
          }
        }
      }
    }
  }
</script>
<style>
  .input_video{
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
</style>

四、結(jié)果

  結(jié)果如圖所示:

  vue-video-player的npm社區(qū)地址:https://www.npmjs.com/package/vue-video-player

以上就是vue使用video插件vue-video-player的示例的詳細內(nèi)容,更多關(guān)于vue使用video插件的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue3中element-plus?Upload上傳文件代碼示例

    vue3中element-plus?Upload上傳文件代碼示例

    這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時間開發(fā)中上傳文件是經(jīng)常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • ant design 日期格式化的實現(xiàn)

    ant design 日期格式化的實現(xiàn)

    這篇文章主要介紹了ant design 日期格式化的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue中防抖和節(jié)流的使用方法

    vue中防抖和節(jié)流的使用方法

    防抖和節(jié)流是我們在開發(fā)過程中常用優(yōu)化性能的方式,可以減少不必要的計算,不浪費資源,只在適合的時候再進行觸發(fā)計算,這篇文章主要給大家介紹了關(guān)于vue中防抖和節(jié)流使用的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • Vue中前后端使用WebSocket詳細代碼實例

    Vue中前后端使用WebSocket詳細代碼實例

    websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue-cli瀏覽器實現(xiàn)熱更新的步驟

    vue-cli瀏覽器實現(xiàn)熱更新的步驟

    這篇文章主要介紹了vue-cli-瀏覽器實現(xiàn)熱更新,最常用的是webpack-dev-server,它是一個小型的Node.js?Express服務器,它使用webpack-dev-middleware來服務于webpack的包,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友參考下吧
    2024-03-03
  • vue數(shù)據(jù)控制視圖源碼解析

    vue數(shù)據(jù)控制視圖源碼解析

    本篇內(nèi)容給大家詳細分析了關(guān)于vue數(shù)據(jù)控制視圖的源碼以及重點做了注釋,有興趣的朋友參考學習下。
    2018-03-03
  • Vue項目接入Paypal實現(xiàn)示例詳解

    Vue項目接入Paypal實現(xiàn)示例詳解

    這篇文章主要介紹了Vue項目接入Paypal實現(xiàn)示例詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

    el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

    這篇文章主要給大家介紹了關(guān)于el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下
    2023-10-10
  • Vue 動態(tài)設(shè)置路由參數(shù)的案例分析

    Vue 動態(tài)設(shè)置路由參數(shù)的案例分析

    這篇文章主要介紹了Vue 動態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • vue中關(guān)閉eslint的方法分析

    vue中關(guān)閉eslint的方法分析

    這篇文章給大家講述了vue中關(guān)閉eslint的方法內(nèi)容,有需要的讀者們可以參考學習下。
    2018-08-08

最新評論