[JavaScript知识库]在线播放的vue组件。

<template>
  <video v-if="videoUrl"
         ref="video"
         :class="{'video-full-wrapper': isFull, 'zoomIn': isFull}"
         class="animated video-js vjs-default-skin"
         preload="auto"
         data-setup="{}"
         autoplay
         loop
         muted>
    <source :src="videoUrl"
            :type="videoType" />
  </video>
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "video.js/dist/video-js.css";

export default {
  name: "LiveVideo",
  props: {
    videoUrl: {
      required: true,
      default: ""
    },
    videoType: {
      default: "application/x-mpegURL"
    },
    isFull: {
      default: () => false
    },
    spareVideoUrl: {
      default: ""
    }
  },
  data() {
    return {
      player: undefined,
      liveError: false
    };
  },
  watch: {
    liveError(v) {
      if (!this.spareVideoUrl) return
      this.player.src(v ? this.spareVideoUrl : this.videoUrl);
      this.player.load();
      if (v) {
        setTimeout(() => {
          this.liveError = false;
        }, 1000 * 60 * 5);
      }
    }
  },
  mounted() {
    const _this = this;
    let time = 0;
    if (this.videoUrl) {
      let option = {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true
      };
      this.player = videojs(this.$refs.video, option, function() {
        this.play();
        this.tech_.on("retryplaylist", () => {
          time++;
          if (!(time % 10)) {
            _this.liveError = true;
          }
        });

        this.on("error", e => {
          _this.liveError = true;
        });
      });
    }
  },
  beforeDestroy() {
    this.player.dispose();
  }
};
</script>
<style scoped lang="less">
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖