DPlayer视频播放器使用方法介绍

1.npm install dplayer - s

npm install dplayer - s

2.import DPlayer from "dplayer";

import DPlayer from "dplayer";

3.

        <div
          id="dplayer"
          ref="player"
          style="height: 500px"
          class="dplayer video-box"
        ></div>

这里注意 id 后的值与 插入的对应上，主要的是锚点ref="player"

4.

// 查看内容
    async seeContent(item) {
      const res = await this.$api.CourseHourGet({ id: item.Ch_Id });
      // 视频类型
      if (res.response.ch_type == 1) {
        this.seevideoUrl = res.response.ch_link;
        this.seevideoVisible = true;
        console.log("seevideoUrl", this.seevideoUrl);
        if (this.seevideoUrl) {
          console.log("執行");
          this.$nextTick(() => {
            // this.loadVideo(res.response.ch_link);
            this.loadVideo(this.seevideoUrl);
          });
        }
      } else if (res.response.ch_type == 2) {
        this.pdfUrl = res.response.ch_link;
        this.seePDFVisible = true;
        this.getPage();
      }
    },

调用接口 把值传递给下面方法

5. 

    loadVideo(videoInfo) {
      this.dp = new DPlayer({
        theme: "#1890FF", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        element: this.$refs.player,
        hotkey: false,
        video: {
          url: videoInfo,
          type: "auto",
        },
      });
    },