mui-player自定義底部導(dǎo)航在vue項目中顯示不出來的解決

更新時間：2022年12月06日 11:48:29 作者：牛先森家的牛奶

這篇文章主要介紹了mui-player自定義底部導(dǎo)航在vue項目中顯示不出來的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

mui-player自定義底部導(dǎo)航在vue項目中顯示不出

看了作者的源碼和案例等，先上代碼：

<template>
  <div class="content-box">
    <div class="container">
      <div>視頻插件 mui-player</div>
      <div id="mui-player">
        <div slot="nextMedia1">
          <svg
            t="1584686776454"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1682"
            width="22"
            height="22"
          >
            <path
              d="M783.14692466 563.21664097L240.85307534 879.55472126c-39.1656664 24.10194914-90.38230866-6.02548665-90.38230865-51.21664226v-632.676158c0-45.19115433 51.21664097-75.31859011 90.38230865-51.21664226l542.29384932 316.33808029c39.1656664 21.08920518 39.1656664 81.34407804 0 102.43328194z"
              p-id="1683"
              fill="#ffffff"
            ></path>
            <path
              d="M873.52923331 734.94302767c0 42.17841036-39.1656664 78.33133408-90.38230865 78.33133407s-90.38230866-36.15292371-90.38230735-78.33133407V289.05697233c0-42.17841036 39.1656664-78.33133408 90.38230735-78.33133407s90.38230866 36.15292371 90.38230865 78.33133407v445.88605534z"
              p-id="1684"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
        <div slot="nextMedia2">查看</div>
      </div>
    </div>
  </div>
</template>

<script>
import MuiPlayer from 'mui-player'
export default {
  name: 'plugin',
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let that = this
      // 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
      var mp = new MuiPlayer({
        container: '#mui-player',
        title: '標(biāo)題',
        src: require('@/assets/video/landscapebig.mp4'),
        custom: {
          footerControls: [
            {
              slot: 'nextMedia1', // 對應(yīng)定義的 slot 值
              position: 'left', // 顯示的位置，可選 left、right
              tooltip: '下一集', // 鼠標(biāo)懸浮在控件上顯示的文字提示
              oftenShow: true, // 是否常顯示。默認(rèn)為false，在 mobile 環(huán)境下豎屏狀態(tài)下隱藏，pc環(huán)境判下視頻容器小于500px時隱藏
              click: function (e) {
                // 按鈕點擊事件回調(diào)
                console.log('next media button click...', e)
              },
              style: {
                backgroud: '000',
                color: '000'
              } // 自定義添加控件樣式
            },
            {
              slot: 'nextMedia2', // 對應(yīng)定義的 slot 值
              position: 'right', // 顯示的位置，可選 left、right
              tooltip: '下一集', // 鼠標(biāo)懸浮在控件上顯示的文字提示
              oftenShow: true, // 是否常顯示。默認(rèn)為false，在 mobile 環(huán)境下豎屏狀態(tài)下隱藏，pc環(huán)境判下視頻容器小于500px時隱藏
              click: function (e) {
                // 按鈕點擊事件回調(diào)
                console.log('next media button click...', e)
                that.$message({
                  message: '警告哦，這是一條警告消息',
                  type: 'warning'
                })
              },
              style: {
                background: 'rgba(255,255,255, 0.1)',
                color: '#fff',
                width: '50px',
                marginLeft: '100px'
              } // 自定義添加控件樣式
            }
          ]
        }
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
</style>