html5怎么改为vue_vue视频播放插件 vue-video-player

第一次写文章主要是对项目完成后的一次代码回顾。（遇到的一些坑）首先是，插件Github地址 vue-video-player插件目标效果点击右侧图片，左侧视频源随之变化第一步npmnpm install vue-video-player --saveMain.jsimport VideoPlayer from 'vue-video-player'require('video.js/dist/vi.

weixin_39732018

190人浏览 · 2020-11-21 01:19:25

weixin_39732018 · 2020-11-21 01:19:25 发布

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

首先是，插件Github地址 vue-video-player插件

目标效果

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

第一步

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>

待完善

我的segmentfault

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

操作系统大会&openEuler Summit 2024参会指南，请查收！