vue视频播放插件 vue-video-player

前端这点事 165 0

第一次写文章主要是对项目完成后的一次代码回顾。(遇到的一些坑)

目标效果

点击右侧图片,左侧视频源随之变化

  • 第一步

npm

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)
  • 第二步

组件Mounted

  • 首先是html部分(右侧加入点击事件)
<video-player ref="myPlayer" :options="playerOptions">
</video-player>
<div class="middle">
  <div @click="activited(index)" v-for="(item, index) in topList" v-show="index < 4" :key="index" :id="'id' + index" class="middle_item" :class="{ midd@click="activited(index); kickTimer"le_item_active: index === activePosition }">
    <el-tooltip effect="dark" :content="item.title" placement="right">
      <filter-img :src="item.pics"></filter-img>
    </el-tooltip>
  </div>
</div>
  • 然后是data部分
playerOptions: {
    techOrder: ['flash', 'html5'],
    preload: 'auto',
    sourceOrder: true,
    sources: [],
    aspectRatio: '16:9',
    height: 350,
    autoplay: false,
    controls: true,
    language: 'zh-CN',
    fluid: true,
    notSupportedMessage: '此视频暂无法播放,请稍后再试'
}
  • computed以及事件部分
computed: {
    player() {
      return this.$refs.myPlayer.player
    }
},

methods: {
    ajaxData () {
        ...
        this.$set(this.playerOptions.sources, 0, {
          type: "video/mp4",
          src: url,
        })
    },
    activited (index) {
      this.activePosition = index
      this.$set(this.playerOptions.sources, 0, {
        type: "video/mp4",
        src: this.topList[index].url,
      })
      this.player.muted(false)
    },
}

需要注意的地方是就要用$set方法在获取数据时就给原始data一个视频源,否则,插件会出现无法播放的错误;

最后是样式部分
视频原始样式不是很美观,修改样式时请注意style中不要加scoped

<style lang="scss">
.Videoindex {
  display: block;
  height: 350px; max-height: 350px; margin: 10px auto;
  .video-js .vjs-tech {
    width: 100%;
    height: 350px;
    max-height: 350px;
  }
}

.video-js .vjs-big-play-button{
  position: absolute;
  display: block;
  top: 46%;
  left: 43%;
  background: rgba(0, 0, 0, .7);
  border: none;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button {
  display: none;
}
.vjs-paused .vjs-big-play-button {
  display: block;
}
</style>

标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~