live-mobile/src/views/live/trainInter/parts/video_1.vue

<template>
  <div id="video_1">
    <el-row>
      <el-col :span="24" class="main">
        <van-col span="24" class="video">
          <video
            autoplay="autoplay"
            controls="controls"
            preload="meta"
            x-webkit-airplay="true"
            webkit-playsinline="true"
            playsinline="true"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            :src="videoPath"
            v-if="videoData.length > 0"
            loop="loop"
          >
            <source src="movie.ogg" type="video/ogg" />
            <source src="movie.mp4" type="video/mp4" />
          </video>
          <p v-else>{{ form.title }}</p>
        </van-col>
        <van-col span="24" class="btn">
          <el-button type="primary" size="mini" @click="back()">返回列表</el-button>
          <el-button type="primary" size="mini" @click="showPopup()">选择视频</el-button>
        </van-col>
      </el-col>
    </el-row>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title="视频信息"
        v-model="show"
        show-toolbar
        :columns="videoData"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        value-key="videointro"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const _ = require('lodash');
export default {
  name: 'video_1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function() {
    return {
      videoData: [],
      videoPath: '',
      show: false,
    };
  },
  created() {},
  methods: {
    searchVideo(data) {
      let videoData = data.video_data.map(i => i.video_title);
      if (videoData) {
        this.$set(this, `videoData`, videoData);
        this.$set(this, `videoPath`, _.get(_.head(data.video_data), 'video_url'));
      }
    },
    back() {
      this.$router.push({ path: '/live/trainInter/index' });
    },
    showPopup() {
      this.show = true;
    },
    // 选择视频
    changeMenu(index, value) {
      const item = this.form.video_data[index];
      if (item) {
        this.$set(this, `videoPath`, item.video_url);
      }
    },
    // 确定选择
    onConfirm(value, index) {
      this.changeMenu(index, value);
      this.onCancel();
    },
    onChange(value, index) {
      this.changeMenu(index, value);
    },
    // 取消
    onCancel() {
      this.show = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.searchVideo(val);
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .video {
    height: 210px;
    overflow: hidden;
    .h5video {
      width: 100%;
      height: 210px;
    }
    p {
      font-size: 18px;
    }
  }
  .btn {
    text-align: center;
    height: 40px;
    padding: 5px 0;
  }
}
</style>