vue插件封装一个video组件

使用@vue/cli-service-global快速启动插件环境
codepen预览代码

关于cli-service-global这个工具，是在面试线上做题时遇到的，配合vue/cli启动环境写两个功能，可以快速安装&启动原型开发环境，本文是基于video.js对<video>进行封装，并由于长代码贴出来没有一i是，故放于code上展示

---

环境安装

npm install -g @vue/cli
npm install -g @vue/cli-service-global

npm install -S video.js
npm install -S videojs-markers

入口文件是index.js/main.js/app.vue/App.vue

vue serve 启动,或者vue serve xxx.vue
vue build 打包,或者vue build xxx.vue

• /目录/
  • package.json
  • App.vue
  • test.vue
  • /assets/
    • image&video

codepen

众所周知，codepen是一款展示html/css/js的分(she)享(jiao)工(ruan)具(jian)

那如何放vue代码呢

没有搜索到相关方法，良久 未解，只好一个个点进去看，终于：

左侧explore探索下的topics话题，选择vue，Open Vue Editor

预览

进入了https://codepen.io/pen/editor/vue，美滋滋，代码略长就可以直接放codepen上了
（关闭result面版）

引用

暂时还未在codepen上找到多文件的预览方式，就继续贴代码吧（关闭result查看效果）

// 父组件test.vue
<video-player
    ref="video"
    :src="videoSrc"
    type="video/mp4"
    :options="videoOptions"
    :markers="videoMarkers"
    webkit-playsinline="true"
/>

import VideoPlayer from "./App.vue";

data() {
    return {
      videoSrc: videoMp4,
      videoOptions: {
        autoplay: false,
        controls: true,
        poster: posterJpg
      },
      videoMarkers: {
        markers: [
          {
            time: 10,
            text: "点位一"
          },
          {
            time: 20,
            text: "点位二"
          }
        ]
      }
    };
  },
  methods: {
    videoBtnHandler(type) {
      console.log(type);
      this.$refs.video.player[type] && this.$refs.video.player[type]();
    },
    changeVideo() {
      this.$refs.video.player["src"] &&
        this.$refs.video.player["src"](videoMp42);
    },
    changeVideo2() {
      this.videoSrc = videoMp42;
    }
}

缺少预览是因为codepen 要pro高级版才可以上传，基本是基于video.js的功能做了封装到vue