<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view
    class="container playerBox"
    id="playerBox"
    style="
      background-color: #000;
      width: 100%;
      height: 200px;
      position: relative;
      padding: 0;
      overflow: hidden;
    "
  >
    <view
      class="boxShadow"
      style="
        position: relative;
        width: 100%;

        height: 200px;
      "
    >
      <image
        class="bofangbg"
        :src="curriculumData.curriculumImgUrl"
        mode="widthFix"
        style="
          width: 100%;
          position: absolute;
          height: 200px;
          top: 0;
          left: 0;
          right: 0;
          border-radius: 40rpx;
          opacity: 0.45;
          overflow: hidden;
        "
      >
      </image>

      <view
        class="bgfff"
        style="
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 40rpx;
          border: 15rpx solid  #000;
          padding: 40rpx 0 20rpx;
          box-sizing: border-box;
          background-size: cover;
          background-position: center;
          background-image: linear-gradient(
            80deg,
            rgb(69 70 68 / 54%) 0%,
            rgb(72 72 70 / 98%) 100%
          );
        "
      >
        <view>
          <view
            style="
              color: #fff;
              text-align: center;
              font-size: 36rpx;
              font-weight: bold;
            "
            >{{ curriculumData.title }}</view
          >

          <view
            style="
              color: #fff;
              text-align: center;
              font-size: 28rpx;
              margin-top: 6px;
            "
            >音频
            {{
              Number(currentVideoIndex + 1) > 10
                ? Number(currentVideoIndex + 1)
                : "0" + Number(currentVideoIndex + 1)
            }}
          </view>
          <view class="audo-video">
            <view class="slider-box">
              <text class="mm">{{ timer }}</text>

              <slider
                style="width: 440rpx"
                @change="sliderChange"
                @changing="sliderChanging"
                class="audio-slider"
                block-size="16"
                :min="0"
                :max="duration"
                :value="currentTime"
                activeColor="#FF8849"
                @touchstart="lock = true"
                @touchend="lock = false"
              />
              <text class="ss" v-if="overTimer != 'NaN:NaN'">{{
                overTimer
              }}</text>
              <text class="ss" v-else>00.00</text>
            </view>
            <!--音频播放按钮处-->
            <view class="audo-top">
              <!--上一首-->
              <!-- <image
              src="./icon/xys.png"
              style="width: 40rpx; height: 40rpx; transform: rotate(180deg)"
              mode="aspectFill"
              @click="upper(1)"
            ></image> -->
              <!--上一首-->

              <!--快退-->
              <image
                src="./icon/kt.png"
                style="width: 60rpx; height: 60rpx"
                mode="widthFix"
                @click="jump('kt')"
              ></image>
              <!--快退-->

              <!--播放-->
              <image
                v-if="!isPlay"
                src="./icon/zt.png"
                style="width: 180rpx; height: 180rpx"
                mode="widthFix"
                @click="plays()"
              ></image>
              <image
                v-else
                src="./icon/bofang2.png"
                style="width: 180rpx; height: 180rpx"
                mode="widthFix"
                @click="plays()"
              ></image>

              <!-- 
              <image
              :src="succes?'./icon/zt.png':'./icon/bofang2.png'"
              mode="aspectFill"
                style="width: 160rpx; height: 160rpx"
               
                @click="plays()"
              ></image> -->

              <!--播放-->

              <!--快进-->
              <image
                src="./icon/kj.png"
                style="width: 60rpx; height: 60rpx"
                mode="widthFix"
                @click="jump('kj')"
              ></image>
              <!--快进-->

              <!--下一首-->
              <!-- <image
              src="./icon/xys.png"
              style="width: 40rpx; height: 40rpx"
              mode="aspectFill"
              @click="upper(2)"
            ></image> -->
              <!--下一首-->

              <view class="audo-a" style="">
                <!--进度条-->

                <!--进度条-->

                <!--倍数-->
                <view
                  class="beishu"
                  style="border: 1rpx solid #e1dbf2"
                  @click="beishu"
                >
                  {{ BsNav[bsindex].bs }} X
                </view>
                <view
                  class="absolute"
                  style="right: 0; top: 80rpx"
                  v-if="shows"
                >
                  <!-- 	<u-transition :show="show" mode="slide-right" duration="300"> -->
                  <view
                    class="beishu-a"
                    style="border: 1rpx solid #fff"
                    v-if="shows"
                  >
                    <view
                      v-for="(item, index) in BsNav"
                      :key="index"
                      @click="setRate(index, item)"
                      class="title beishuItem"
                      :style="{ color: bsid == item.id ? '#9461EB' : '' }"
                    >
                      {{ item.bs }} X
                    </view>
                  </view>
                  <!-- 	</u-transition> -->
                </view>
                <!--倍数-->
              </view>
            </view>
            <!--音频播放按钮处-->

            <!--音频api处[视频代替音频-实现倍数功能]-->
            <!-- <video
            id="myVideo"
            ref="myVideo"
            :src="recorPath"
            class="hidden"
            @timeupdate="timeupdate"
            :autoplay="autoplays"
            @loadedmetadata="loadedmetadata"
            @ended="next"
            controls
            style="width: 10rpx; height: 10rpx"
          ></video> -->
            <!--音频api处[视频代替音频-实现倍数功能]-->
          </view>
        </view>
      </view>
      <!--占位-->
    </view>
    <div style="width: 1rpx; height: 1rpx; overflow: hidden">
      <!-- ios不能播放私有加密提示信息 start-->

      <!-- ios不能播放私有加密提示信息 end-->
      <div ref="videoContent" id="url-player-test"></div>
      <div
        v-show="false"
        :videoData="videoData"
        :isDipose="isDipose"
        :sliderChangeNumber="sliderChangeNumber"
        :bsid="bsid"
        :isPlay="isPlay"
        :jumpNumber="jumpNumber"
        :winWidth="winWidth"
        :winHeight="winHeight"
        :firstTime="firstTime"
        :isOnLoad="isOnLoad"
        :platform="platform"
        :isSetFirstTime="isSetFirstTime"
        :isChange="isChange"
        :change:videoData="renderScript.receiveMsg"
        :change:isPlay="renderScript.receiveMsgSucces"
        :change:jumpNumber="renderScript.receiveMsgjumpNumber"
        :change:sliderChangeNumber="renderScript.receiveMsgsliderChangeNumber"
        :change:bsid="renderScript.receiveMsgBsid"
        :change:isDipose="renderScript.receiveisDipose"
        :change:winWidth="renderScript.receiveWinWidth"
        :change:winHeight="renderScript.receiveWinHeight"
        :change:firstTime="renderScript.receiveFirstTime"
        :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
        :change:isOnLoad="renderScript.receiveIsfresh"
        :change:platform="renderScript.receiveplatform"
        :change:isChange="renderScript.receiveIsChange"
      ></div>
      <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
        直接调用renderjs中的emitData的方法,传递当前播放时长
      </div>
      <div
        @tap="renderScript.emitDataSucces"
        ref="videoContentSucces"
        v-show="false"
      >
        视频是否加载完成
      </div>
      <div
        @tap="renderScript.emitDataPlay"
        ref="videoContentPlay"
        v-show="false"
      >
        视频播放状态
      </div>
      <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
        监听结束方法，记录播放时长
      </div>
      <div
        @tap="renderScript.changeVideoData"
        ref="videoContent3"
        v-show="false"
      >
        监听切换视频方法
      </div>
      <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
        监听第一次初始播放时长,开始进行接口存储时间
      </div>
      <div @tap="renderScript.emitDispose" ref="videoContent6" v-show="false">
        监听第一次初始播放时长,开始进行接口存储时间
      </div>

      <!-- 全屏按钮 start -->
      <!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
      <div class="fullScreenButton-container" v-if="platform != 'ios'">
        <div
          :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
          @tap="renderScript.changeVideoScreen"
        ></div>
      </div>
      <!-- 全屏按钮 end -->
    </div>
  </view>
</template>
<script>
function calcTimer(timer) {
  if (timer === 0 || typeof timer !== "number") {
    return "00:00";
  }
  let mm = Math.floor(timer / 60);
  let ss = Math.floor(timer % 60);
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (ss < 10) {
    ss = "0" + ss;
  }
  return mm + ":" + ss;
}
import store from "@/store/index.js";
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    videoData: {
      type: Object,
      default: {},
    },
    videoInfo: {
      type: Object,
      default: {},
    },
    curriculumData: {
      type: Object,
      default: {},
    },
    firstTime: {
      type: Number,
      default: 0,
    },
    currentVideoIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isPlay: false,
      shows: false,
      BsNav: [
        {
          id: 1.0,
          bs: "1.0",
        },
        {
          id: 1.25,
          bs: "1.25",
        },
        {
          id: 1.5,
          bs: "1.5",
        },
        {
          id: 2.0,
          bs: "2.0",
        },
      ],
      duration: 0,
      show: false, //视频提示显示
      succes: false, //视频提示显示
      isDipose: false, //视频提示显示
      content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
      platform: null, //设备类型
      isFullScreen: false, //当前是否是全屏模式
      isOnLoad: false, //是否刷新
      isChange: false, //是否切换播放源
      videoList: [], //视频列表
      videoOssList: [], //本地视频列表
      options: {}, //父组件传参
      currentTime: "", //当前播放时间
      bsid: 1.0, //倍数默认显示第一个
      jumpNumber: 0, //倍数默认显示第一个
      bsindex: 0, //倍数默认显示第一个
      isSetFirstTime: false, //是否获取到初始播放时间
      sliderChangeNumber: null,
      urlList: {
        checkVideo: "sociology/course/checkVideo",
      },
    };
  },

  computed: {
    timer() {
      return calcTimer(this.currentTime);
    },
    overTimer() {
      return calcTimer(this.duration);
    },
  },
  // ...mapState(["videoOssList"]),

  watch: {
    timer(newValue) {
      this.$emit("child-event", newValue);
    },
    videoOssList: {
      immediate: true,
      handler(newValue) {
        if (this.videoOssList.length > 0) {
          uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
        }
      },
    },
  },
  //
  mounted() {
    this.platform = this.$platform;
    this.show = false;
    if (uni.getStorageSync("videoOssList")) {
      this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
    }
  },
  //子组件销毁前
  beforeDestroy() {
    this.handleEnd();

    clearInterval(this.$store.state.videoTimer);
    plus.screen.lockOrientation("portrait-primary");
  },
  updated() {
    // console.log("触发了更新");
  },
  methods: {
    beishu() {
      if (this.bsindex < this.BsNav.length - 1) {
        this.bsindex = this.bsindex + 1;
      } else {
        this.bsindex = 0;
      }
      this.bsid = this.BsNav[this.bsindex].id;
    },
    // 倍速
    setRate(index, item) {
      this.bsid = item.id;
      this.bsindex = index;
      this.shows = false;
      this.playbackRate();
    },

    //快进快退
    jump(e) {
      var num;
      if (e == "kt") {
        num = Number(this.currentTime - 15);
        this.jumpNumber = num <= 0 ? 0 : num;
      } else {
        num = Number(this.currentTime + 15);
        this.jumpNumber = num >= this.duration ? this.duration : num;
      }

      console.log("num at line 426:", this.jumpNumber);
    },
    seek(num) {
      this.$nextTick(() => {
        //#ifdef H5
        //#endif
      });
    },
    //加载框--封
    playLoading() {
      if (this.loading && !this.succes) {
        uni.showLoading({
          title: "音频加载中...",
        });
        this.loading = false;
      }
      setTimeout(() => {
        uni.hideLoading();
      }, 1500);
    },
    plays() {
      this.playLoading();
      // this.succes = !this.succes;
      this.isPlay = !this.isPlay;
    },

    //拖动中
    sliderChanging(data) {
      if (data.detail.value == 0) {
        // this.succes = false;
        // this.pause_();
      }
      // this.currentTime = data.detail.value;
    },

    // 拖动进度条
    sliderChange(data) {
      console.log("data at line 279:", data.detail.value);
      this.sliderChangeNumber = data.detail.value;
      //此处滑动进度条--开始播放
      // if (this.slideYes && !this.succes) {
      //   this.play_();
      //   this.succes = true;
      // }
      // //#ifdef H5
      // this.$refs.myVideo.seek(data.detail.value); //获取秒数
      // //#endif
      // //#ifndef H5
      // this.videoContext.seek(data.detail.value); //获取秒数
      // //#endif
    },
    emitDispose1(status) {
      this.$emit("handleSuccessDispose", status);
    },
    destory() {
      // this.isDipose = true;
    },
    //ios不能播放私有加密提示信息
    openShow() {
      this.show = true;
    },

    changeVideoData() {
      this.show = false;
      this.isChange = false;
    },
    screenChange(data) {
      this.isFullScreen = !data.status;
      this.$emit("changeScreen", this.isFullScreen);
    },

    //当前播放时间 存本地
    recordTime(time) {
      this.currentTime = time;
      var list = [...this.videoOssList];
      var index = list.findIndex((e) => e.id == this.currentVideoId);
      var setData = {
        id: this.currentVideoId,
        vid: this.videoData.vid,
        time: time,
      };
      if (list.length > 0 && index >= 0) {
        list[index] = setData;
      } else {
        list.push(setData);
      }
      this.videoOssList = list;
      if (this.currentTime % 60 == 0) {
        this.setVideoTime();
      }
    },
    handleSucces() {
      this.duration = this.videoInfo.duration;
      //加载完成
      this.succes = true;
      this.isPlay = true;
    },
    handlePlay(status) {
      console.log("status at line 517:", status);
      this.isPlay = status;
    },
    //播放结束
    async handleEnd() {
      this.succes = false;
      this.isPlay = false;
      this.$forceUpdate();
      // uni.showModal({
      //     title: "更新提示",
      //     content: "新版本已经准备好，是否重启应用？",
      //     success(res) {
      //       if (res.confirm) {

      //       }
      //     },
      //   });
      this.setVideoTime();
    },
    //存播放进度
    setVideoTime() {
      if (!this.videoData.id) {
        return false;
      }
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime ? this.currentTime : 0, //秒数
        loadAnimate: "none",
      };

      $http
        .request({
          url: `sociology/course/saveCoursePosition`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {});
    },
    //定时器 存播放进度
    async setVideoFirtsetTime() {
      this.setVideoTime();
    },
  },
};
</script>
<script module="renderScript" lang="renderjs">
var player;
import $ from "jquery";
export default {
	data() {
		return {
			player: null, //播放器
			videoTimer: null, //定时器
			curTime: null, //播放器当前播放进度
			curStatus: null, //播放器当前播放状态
			playerConfig: {
				id: "url-player-test",
				extraInfo: {
					poster: "noposter"
				}, // 播放器参数 extraInfo 的内容会透传到 <video> 标签上
				width: "100%", //容器的大小
				height: "100%", //容器的大小
				qualitySort: "asc",
				cover: "",
				autoplay: true,
				isLive: false,
				rePlay: false,
				playsinline: true,
				controlBarVisibility: "hover",
				useH5Prism: true,
				skinLayout: [],
			},

			skinLayoutIos: [{
					name: "bigPlayButton",
					align: "blabs",
					x: 30,
					y: 80,
				},
				{
					name: "H5Loading",
					align: "cc",
				},
				{
					name: "errorDisplay",
					align: "tlabs",
					x: 0,
					y: 0,
				},
				{
					name: "infoDisplay",
				},
				{
					name: "tooltip",
					align: "blabs",
					x: 0,
					y: 56,
				},
				{
					name: "thumbnail",
				},
				{
					name: "controlBar",
					align: "blabs",
					x: 0,
					y: 0,
					children: [{
							name: "progress",
							align: "blabs",
							x: 0,
							y: 44,
						},
						{
							name: "playButton",
							align: "tl",
							x: 15,
							y: 12,
						},
						{
							name: "timeDisplay",
							align: "tl",
							x: 10,
							y: 7,
						},
						{
							name: "fullScreenButton",
							align: "tr",
							x: 10,
							y: 12,
						},
						{
							name: "prism-speed-selector",
							align: "tr",
							x: 15,
							y: 12,
						},
						{
							name: "volume",
							align: "tr",
							x: 5,
							y: 10,
						},
					],
				},
			],
			skinLayoutAndroid: [{
					name: "bigPlayButton",
					align: "blabs",
					x: 30,
					y: 80,
				},
				{
					name: "H5Loading",
					align: "cc",
				},
				{
					name: "errorDisplay",
					align: "tlabs",
					x: 0,
					y: 0,
				},
				{
					name: "infoDisplay",
				},
				{
					name: "tooltip",
					align: "blabs",
					x: 0,
					y: 56,
				},
				{
					name: "thumbnail",
				},
				{
					name: "controlBar",
					align: "blabs",
					x: 0,
					y: 0,
					children: [{
							name: "progress",
							align: "blabs",
							x: 0,
							y: 44,
						},
						{
							name: "playButton",
							align: "tl",
							x: 15,
							y: 12,
						},
						{
							name: "timeDisplay",
							align: "tl",
							x: 10,
							y: 7,
						},

						{
							name: "prism-speed-selector",
							align: "tr",
							x: 15,
							y: 12,
						},
						{
							name: "volume",
							align: "tr",
							x: 5,
							y: 10,
						},
					],
				},
			],
		};
	},

	watch: {
		//播放器当前播放进度
		curTime(val) {
			if (this.curTime !== null) {
				this.$refs.videoContent1.click();
			}
		},
	},

	created() {},

	mounted() {},
	async beforeDestroy() {
		if (player) {
			player.dispose();
		}
		$("#url-player-test").empty();
		console.log("阿里云子组件销毁赋空");
	},
	methods: {
		//检验视频 获取加密权限
		checkValue() {
			if (!this.videoData.vid) {
				setTimeout(() => {
					this.checkValue();
				}, 500);
			} else {
				setTimeout(() => {
					this.initAliyunPlayer();
				}, 0);
			}
		},

		//初始化播放器
		initAliyunPlayer() {
			console.log("实例创建中 at line 436:", "实例创建中");
			$("#url-player-test").empty();
			//       const saveTime = function (memoryVideo,currentTime) {
			// 	console.log(memoryVideo, currentTime)
			// }

			// const getTime = function (memoryVideo) {
			// 	/* return返回的是自定义起播时间  */
			// 	return 20
			// }
			var components = [{
					name: "RateComponent", //倍速组件
					type: AliPlayerComponent.RateComponent,
				},

			];
			if (this.platform != "ios") {
				var fullScreenButtonComponent = Aliplayer.Component({
					init: function(status, toAddress) {
						this.fullScreenStatus = status;
						this.$html = $(".fullScreenButton-container");
					},
					createEl: function(el) {
						this.$html.find(".ad").attr("src", this.adAddress);
						var $adWrapper = this.$html.find(".ad-wrapper");
						$adWrapper.attr("href", this.toAddress);
						$adWrapper.click(function() {});
						$(el).find(".prism-time-display").after(this.$html);
					},
				});

				components = [
					...components,
					{
						name: "adComponent", //自定义全屏组件
						type: fullScreenButtonComponent,
					},


				];
			}

			//设置播放基本配置
			var playerOptions = {
				...this.playerConfig,
				components: components,
				skinLayout: this.platform == "ios" ? this.skinLayoutIos : this.skinLayoutAndroid,
			};

			if (this.videoData.encryptType == 1) {
				playerOptions = {
					...playerOptions,
					vid: this.videoData.vid,
					playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
					encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
					playConfig: {
						EncryptType: "AliyunVoDEncryption",
					},
				};
			} else {
				playerOptions = {
					...playerOptions,
					source: this.videoData.source,
				};
			}
			player = new Aliplayer(playerOptions, (player) => {

				player.on("play", (res) => {
					console.log('res at line 835:', res.type)
					this.curStatus = true
					this.$refs.videoContentPlay.click();


				})
				player.on("pause", (res) => {
					console.log('res at line 83511:', res.type)
					this.curStatus = false
					this.$refs.videoContentPlay.click();


				})
				player.on("ready", () => {
					this.player = player;
					var lastTime = this.firstTime;
					if (this.platform == "ios") {
						this.player.one("canplay", () => {
							this.player.seek(this.firstTime);
							//       uni.showToast({
							// 	title: '已为您定位至上次观看位置'
							// })

						});
					} else {
						this.player.seek(this.firstTime);
						//     uni.showToast({
						// 	title: '已为您定位至上次观看位置'
						// })

					}

					this.player.one("timeupdate", () => {



						if (!this.player.tag.seeking) {
							// 更新最近一次的播放位置
							lastTime = parseInt(this.player.getCurrentTime());
							this.curTime = lastTime;
						}
					});
					this.player.on("timeupdate", () => {
						if (!this.player.tag.seeking) {
							// 更新最近一次的播放位置
							lastTime = parseInt(this.player.getCurrentTime());
							this.curTime = lastTime;
						}
					});

					this.player.on("ended", () => {
						lastTime = parseInt(this.player.getCurrentTime());
						this.curTime = lastTime;
						this.$refs.videoContent2.click();
						this.curStatus = false
						this.$refs.videoContentPlay.click();
					});
					player.on("dispose", (res) => {
						console.log("播放器销毁:", res);
					});
				});
			});
			this.$refs.videoContentSucces.click();

		},

		//调用 recordTime 方法 存本地播放时长
		emitData(event, ownerInstance) {
			ownerInstance.callMethod("recordTime", this.curTime);
		},

		//调用 setVideoFirtsetTime 设置初始播放
		emitSetData(event, ownerInstance) {
			ownerInstance.callMethod("setVideoFirtsetTime");
		},

		//调用 openShow 设置ios 不能播放私用加密 提示信息
		emitopenShow(event, ownerInstance) {
			ownerInstance.callMethod("openShow");
		},
		emitDispose(event, ownerInstance) {
			ownerInstance.callMethod("emitDispose1", true);
		},
		//调用 handleEnd 存储视频播放信息
		endEmitData(event, ownerInstance) {

			ownerInstance.callMethod("handleEnd");
		},
		emitDataSucces(event, ownerInstance) {

			ownerInstance.callMethod("handleSucces");
		},
		emitDataPlay(event, ownerInstance) {


			ownerInstance.callMethod("handlePlay", this.curStatus);
		},

		//调用 screenChange + 设置全屏
		changeVideoScreen(event, ownerInstance) {
			var status = this.player.fullscreenService.getIsFullScreen();
			ownerInstance.callMethod("screenChange", {
				status: status,
				primary: status ? "portrait" : "landscape",
			});

			if (status) {
				setTimeout(() => {
					plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
					this.player.fullscreenService.cancelFullScreen();
				}, 100);
			} else {
				this.player.fullscreenService.requestFullScreen();
				setTimeout(() => {
					plus.screen.lockOrientation("landscape-primary");
				}, 100);
			}
		},

		//调用 changeVideoData 切换播放源
		changeVideoData(event, ownerInstance) {
			ownerInstance.callMethod("changeVideoData");
		},

		//切换播放源
		async receiveIsChange(newValue) {
			if (this.isChange) {
				this.checkValue();
			}
		},

		handleClick(event, ownerInstance) {}, //点击播放器

		receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间

		async receiveisDipose(newValue, oldValue, ownerVm, vm) {
			if (newValue) {
				await player.dispose();
				await this.$refs.videoContent6.click();
			}
		}, //播放时间
		async receiveisPause(newValue, oldValue, ownerVm, vm) {}, //播放时间

		receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间

		receiveMsg(newValue, oldValue, ownerVm, vm) {
			if (typeof window.Aliplayer === "function") {
				this.$nextTick(() => {
					this.checkValue();
				});
			}
		}, //是否刚开始设置播放时间

		receiveMsgSucces(newValue, oldValue, ownerVm, vm) {
			console.log('vm at line 926:', newValue, oldValue, ownerVm, vm)
			if (newValue) {
				//播放
				player.play()
			} else {
				//暂停
				player.pause()
			}

		}, //拖动
		receiveMsgsliderChangeNumber(newValue, oldValue, ownerVm, vm) {
			console.log('vm at line 926:', newValue, oldValue, ownerVm, vm)
			if (newValue != null) {
				if (this.platform == "ios") {
					this.player.one("canplay", () => {
						this.player.seek(newValue);
					});
				} else {
					this.player.seek(newValue);
				}
				this.curTime = newValue
			}
		}, //快进或后退
		receiveMsgjumpNumber(newValue, oldValue, ownerVm, vm) {
			console.log('vm at line 926:', newValue, oldValue, ownerVm, vm)
			if (newValue != 0) {
				if (this.platform == "ios") {
					this.player.one("canplay", () => {
						this.player.seek(newValue);
					});
				} else {
					this.player.seek(newValue);
				}
				this.curTime = newValue
			}
		}, //
		receiveMsgBsid(newValue, oldValue, ownerVm, vm) {
			console.log('vm at line 倍速播放:', newValue, oldValue, ownerVm, vm)
			if (newValue != null) {
				this.player.setSpeed(newValue);
			}
		}, //是否刚开始设置播放时间

		receiveplatform(newValue) {}, //获取设备型号

		receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表

		receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息

		receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度

		receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
	},
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: auto;

  /deep/.pause {
    width: 60rpx !important;
    height: 60rpx !important;
  }
}

.fds {
  background-color: blue;
  height: 600rpx;
  position: fixed;
  top: 60rpx;
}

.returnBack {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 88rpx;
  padding-left: 20rpx;
}

.txt {
  color: #fff;
}

.right_title {
  background: #000;
  height: 96rpx;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.return {
  flex-direction: row;
  align-items: center;
  color: #fff;
}

.right_handle {
  width: 200rpx;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20rpx;
}

cover-view {
  display: block;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
}

cover-view {
  visibility: visible !important;
}

cover-image {
  visibility: visible !important;
}

.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;

  i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    display: block;
    margin-top: 7px;
    cursor: pointer;

    & + i {
      margin-left: 3px;
    }

    @media (min-width: 768px) {
      &:hover + .player-tooltip {
        display: block;
      }
    }
  }

  .player-tooltip {
    &.prev {
      left: -10px;
    }

    &.list {
      left: 5px;
    }

    &.next {
      right: -12px;
    }
  }
}

.playlist-content {
  position: absolute;
  right: 0;
  width: 0px;
  padding-bottom: 48px;
  box-sizing: border-box;
  height: 100%;
  transition: all 0.38s ease-in-out;
  overflow: hidden;

  .list {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    overflow: auto;

    .video-item {
      color: #fff;
      padding: 0px 10px;
      line-height: 35px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &.active {
        background-color: #000;
        color: #00ddff;
      }

      @media (min-width: 768px) {
        &:hover {
          background-color: #000;
          color: #00ddff;
        }
      }
    }
  }
}

.player-tooltip {
  position: absolute;
  display: none;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  background: #3c3c3c;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  height: 28px;
  top: -48px;
  padding: 0 5px;
  white-space: nowrap;
}

.playlist-skip-tip {
  padding: 5px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  transform: translate(-50%, -50%);
}

#rotating-div {
  width: 100vw;
  height: 100vh;
  background-color: #3498db;
  transform: rotate(90deg);
  /* 旋转90度 */
  transform-origin: center center;
  /* 设置旋转中心点在div中心 */
  position: fixed;
  /* 固定定位，全屏显示 */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.audo-video {
  margin-top: 0rpx;
  color: #fff;

  .beishuItem {
    color: #999;
  }
}

.slider-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27rpx;
  // color: #fff;
}

button {
  display: inline-block;
  width: 100rpx;
  background-color: #fff;
  font-size: 24rpx;
  color: #000;
  padding: 0;
}

.hidden {
  position: fixed;
  top: 0;
  left: -10rpx;
  z-index: -1;
  width: 1rpx;
  height: 1rpx;
}

.audo-top {
  padding: 0rpx 0;
  display: flex;
  justify-content: space-around;
  align-items: center;

  image {
    width: 45rpx;
    height: 45rpx;
  }
}

.audo-a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  position: relative;
  z-index: 9;
  margin-right: -20rpx;
}

.beishu {
  position: relative;
  width: 100rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  text-align: center;
  border-radius: 25rpx;
  font-size: 28rpx;
}

.absolute {
  position: absolute;

  .beishu-a {
    width: 140rpx;
    border-radius: 20rpx;
    text-align: center;
    line-height: 50rpx;
    background: #fff;

    .title {
      pdding-left: 30rpx;
    }
  }
}

.bofangbg {
  .container::before {
    content: "";
    /* 伪元素需要内容，即使它是空的 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-size: cover;
    /* 或其他你需要的背景大小 */
    opacity: 0.5;
    /* 设置透明度 */
    z-index: -1;
    /* 确保伪元素在内容之下 */
  }
}
</style>
