live-telecast-ui-h5/src/views/live/liveD.vue

<template>
  <div class="liveD" v-loading="loading">
    <van-nav-bar
      title="订单详情"
      class="van-nav-bar-my-fixed"
      left-arrow
      @click-left="onClickLeft"
      fixedfixed
    />
    <div class="page-main" style="padding-top: 44px">
      <!-- <div class="oDetail" > -->

      <video-player
        ref="videoPlayer"
        id="videoPlayer"
        style="width: 100%"
        :playsinline="true"
        :options="Options"
      />
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/live/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      Options: {},
      img: "",
      url: "",
    };
  },
  async created() {
    window.onresize = () => {
      this.getHeight();
    };
    this.id = this.$route.query.id ? this.$route.query.id : "0";
    this.initOPtions();
    await this.initData();
  },

  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
  methods: {
    getHeight() {
      console.log(this.$refs.videoPlayer);
    },
    onClickLeft() {
      window.history.back(-1);
    },

    async initData() {
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0) {
        const { video_url, video_img } = res.data;
        this.img = video_img;
        this.url = video_url;
        this.initOPtions();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
    initOPtions() {
      this.Options = {
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:10", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "application/x-mpegURL", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: this.url, // 视频url地址
            poster: this.img, // 你的封面地址 // width: document.documentElement.clientWidth, //播放器宽度
            notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,
              durationDisplay: true,
              remainingTimeDisplay: false,
              fullscreenToggle: true, // 全屏按钮
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.liveD {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 44px 0 0 0;
  box-sizing: border-box;
  overflow-y: scroll;
  background: transparent;
  // #videoPlayer {
  //   width: 100% !important;
  //   .video-js {
  //     margin: 0 !important;
  //     padding: 0 !important;
  //     .vjs-big-play-button {
  //       top: 20px!important;
  //       left: 150px!important;
  //     }
  //   }
  // }
  // .liveD-title {
  //   position: fixed;
  //   padding: 0;
  //   width: 100%;
  //   margin: 0;
  //   top: 0;
  //   left: 0;
  //   z-index: 3;
  //   border: 0;
  //   height: 44px;
  // }
}
// .liveD {
//   text-align: center;
// }
</style>