refactor(video): 移除静态广告组件并添加视频快进快退功能

- 删除未使用的静态广告组件及相关文件（MyComponent.vue、staticadcomponent/、videoDetail.vue等）
- 在视频播放器中添加自定义快进（+15秒）和快退（-15秒）按钮组件
- 移除未使用的iOS视频组件注册
- 优化播放器控制栏布局和样式

main.js

@@ -114,8 +114,8 @@ import commonSelectVip from '@/pages/component/commonComponents/selectVip.vue'
 Vue.component('common-select-vip', commonSelectVip);
 import commonAdvertisement from '@/pages/component/commonComponents/advertisement.vue'
 Vue.component('common-advertisement', commonAdvertisement);
-import commonVideoIos from '@/pages/component/commonComponents/video/ios.nvue'
+// import commonVideoIos from '@/pages/component/commonComponents/video/ios.nvue'
-Vue.component('common-video-ios', commonVideoIos);
+// Vue.component('common-video-ios', commonVideoIos);
 // import musicPlay from '@/components/music.vue'
 // Vue.component('music-play', musicPlay);
 

pages/component/commonComponents/video/MyComponent.vue

@@ -1,44 +0,0 @@
-<template>
-  <div>{{ message }}</div>
-</template>
-
-<script>
-import $ from "jquery";
-export default class MyComponent {
-  // data() {
-  //   return {
-  //     message: 'Hello, Vue!'
-  //   }
-  // }
-
-  constructor(adAddress, toAddress) {
-    this.adAddress = adAddress;
-    this.toAddress = toAddress;
-    this.$html = $(html);
-  }
-
-  createEl(el) {
-    this.$html.find(".ad").attr("src", this.adAddress);
-    this.$html.attr("href", this.toAddress);
-    let $adWrapper = this.$html.find(".ad-wrapper");
-    $adWrapper.attr("href", this.toAddress);
-    $adWrapper.click(() => {
-      Aliplayer.util.stopPropagation();
-    });
-    this.$html.find(".close").click(() => {
-      this.$html.hide();
-    });
-    $(el).append(this.$html);
-  }
-
-  ready(player, e) {}
-
-  play(player, e) {
-    this.$html.hide();
-  }
-
-  pause(player, e) {
-    this.$html.show();
-  }
-}
-</script>

pages/component/commonComponents/video/index.vue

@@ -25,7 +25,8 @@
 				:change:isSetFirstTime="renderScript.receiveisSetFirstTime"
 				:change:isfresh="renderScript.receiveIsfresh" :change:platform="renderScript.receiveplatform"
 				:change:isChange="renderScript.receiveIsChange"
-				:change:currentVideoList="renderScript.receiveVideoList"></div>
+				:change:currentVideoList="renderScript.receiveVideoList">
+			</div>
 			<div @tap="renderScript.emitData" ref="videoContent1" v-show="false" class="videoContent1">
 				直接调用renderjs中的emitData的方法,传递当前播放时长
 			</div>
@@ -470,6 +471,9 @@
 	var diff = 0
 	var pauseTime = 0
 	var myplayer = undefined
+	var seekBtnHideTimer = null
+	var seekBtnEls = []
+	var seekBtnsEnabled = true
 	import $ from 'jquery'
 	export default {
 		components: {
@@ -634,6 +638,113 @@
 					},
 
 				});
+				var backBtnComponent = Aliplayer.Component({
+					init: function(status, toAddress) {
+						this.fullScreenStatus = status
+						this.$html = $('#url-player-test');
+					},
+					createEl: function(el) {
+						seekBtnsEnabled = true;
+
+						var container = $('#url-player-test');
+						container.find('.custom-seek-back').remove();
+						container.find('.custom-seek-forward').remove();
+
+						seekBtnEls = [];
+
+						function createSeekBtn(className, label, position) {
+							var btn = document.createElement('button');
+							btn.className = 'custom-seek-btn ' + className;
+							btn.innerText = label;
+							btn.style.position = 'absolute';
+							btn.style.top = '50%';
+							btn.style.transform = 'translateY(-50%)';
+							btn.style.width = '48px';
+							btn.style.height = '48px';
+							btn.style.borderRadius = '50%';
+							btn.style.border = 'none';
+							btn.style.background = 'rgba(255,255,255,0.6)';
+							btn.style.color = '#000';
+							btn.style.fontSize = '14px';
+							btn.style.display = 'flex';
+							btn.style.alignItems = 'center';
+							btn.style.justifyContent = 'center';
+							btn.style.padding = '0';
+							btn.style.display = 'none';
+							btn.style.zIndex = '10';
+							if (position === 'left') {
+								btn.style.left = '30px';
+							} else if (position === 'right') {
+								btn.style.right = '30px';
+							}
+							return btn;
+						}
+
+						var backBtn = createSeekBtn('custom-seek-back', '-15s', 'left');
+						var forwardBtn = createSeekBtn('custom-seek-forward', '+15s', 'right');
+
+						seekBtnEls = [backBtn, forwardBtn];
+
+						var showSeekBtns = function() {
+							if (!seekBtnsEnabled) return;
+							if (!seekBtnEls || !seekBtnEls.length) return;
+							seekBtnEls.forEach(function(btn) {
+								btn.style.display = 'flex';
+							});
+							if (seekBtnHideTimer) {
+								clearTimeout(seekBtnHideTimer);
+							}
+							seekBtnHideTimer = setTimeout(function() {
+								if (!seekBtnEls || !seekBtnEls.length) return;
+								seekBtnEls.forEach(function(btn) {
+									btn.style.display = 'none';
+								});
+							}, 3000);
+						};
+
+						backBtn.onclick = function(e) {
+							if (e && e.stopPropagation) {
+								e.stopPropagation();
+							}
+							showSeekBtns();
+							if (myplayer && myplayer.getCurrentTime) {
+								var current = myplayer.getCurrentTime();
+								var target = current - 15;
+								if (target < 0) {
+									target = 0;
+								}
+								myplayer.seek(target);
+							}
+						};
+
+						forwardBtn.onclick = function(e) {
+							if (e && e.stopPropagation) {
+								e.stopPropagation();
+							}
+							showSeekBtns();
+							if (myplayer && myplayer.getCurrentTime && myplayer.getDuration) {
+								var current = myplayer.getCurrentTime();
+								var duration = myplayer.getDuration();
+								var target = current + 15;
+								if (target > duration) {
+									target = duration;
+								}
+								myplayer.seek(target);
+							}
+						};
+
+						var containerDom = document.getElementById('url-player-test');
+						if (containerDom) {
+							containerDom.addEventListener('click', function() {
+								showSeekBtns();
+							});
+						}
+
+						container.append(backBtn);
+						container.append(forwardBtn);
+					},
+					playing: function(player, e) {},
+				});
 				// console.log('这是查看是否获取到hlstoken', this.videoData)
 				var playerOptions = {
 					id: "url-player-test",
@@ -648,11 +759,12 @@
 					"controlBarVisibility": "hover",
 					"useH5Prism": true,
 					components: [{
-							name: 'adComponent',
+							name: 'fullScreenComponent',
-							type: fullScreenButtonComponent,
+							type: fullScreenButtonComponent
-							args: [
+						},
-								'http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png'
+						{
-							]
+							name: 'backBtnComponent',
+							type: backBtnComponent
 						},
 						{
 							name: 'RateComponent',
@@ -663,9 +775,7 @@
 
 					skinLayout: [{
 							name: "bigPlayButton",
-							align: "blabs",
+							align: "cc",
-							x: 30,
-							y: 80
 						},
 						{
 							name: "H5Loading",
@@ -689,6 +799,12 @@
 						{
 							name: "thumbnail"
 						},
+						{
+							name: "backBtnComponent",
+							align: "blabs",
+							x: 15,
+							y:70
+						},
 						{
 							name: "controlBar",
 							align: "blabs",
@@ -781,6 +897,12 @@
 					console.log('开始播放------',videoDurationTimes,pauseTime);
 					$('.videoContent7').click()
 					
+					seekBtnsEnabled = true;
+					if (seekBtnHideTimer) {
+						clearTimeout(seekBtnHideTimer);
+						seekBtnHideTimer = null;
+					}
+
 					if (pauseTime > 0) {
 						if(pauseTime==videoDurationTimes){
 							return
@@ -830,11 +952,48 @@
 					console.log('播放完毕');
 					$('.videoContent2').click()
 					$('.videoContent6').click()
+
+					seekBtnsEnabled = false;
+					if (seekBtnHideTimer) {
+						clearTimeout(seekBtnHideTimer);
+						seekBtnHideTimer = null;
+					}
+					if (seekBtnEls && seekBtnEls.length) {
+						seekBtnEls.forEach(function(btn) {
+							btn.style.display = 'none';
+						});
+					}
+
+					var $bigBtn = $('#url-player-test .prism-big-play-btn');
+					if ($bigBtn && $bigBtn.length) {
+						$bigBtn.css({
+							left: '30px',
+							bottom: '80px',
+							right: 'auto',
+							top: 'auto',
+							transform: 'none'
+						});
+					}
 				})
 				player.on('pause', function() {
 					pauseTime = parseInt(player.getCurrentTime())
 					player.pause(true)
 					console.log('触发暂停', pauseTime)
+
+					if (player.getStatus && player.getStatus() === 'ended') {
+						return;
+					}
+
+					var $bigBtn = $('#url-player-test .prism-big-play-btn');
+					if ($bigBtn && $bigBtn.length) {
+						$bigBtn.css({
+							left: '50%',
+							top: '50%',
+							right: 'auto',
+							bottom: 'auto',
+							transform: 'translate(-50%, -50%)'
+						});
+					}
 				})
 
 				myplayer.on('error', function() {
@@ -1182,4 +1341,26 @@
 		bottom: 0;
 		right: 0;
 	}
+	#url-player-test {
+		position: relative;
+	}
+	#url-player-test .custom-seek-btn {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+		border: none;
+		background: rgba(0, 0, 0, 0.5);
+		color: #fff;
+		font-size: 14px;
+		outline: none;
+		cursor: pointer;
+		pointer-events: auto;
+		position: absolute;
+		top: 50%;
+		left: 30px;
+	}
+	
+	#url-player-test .custom-seek-btn:active {
+		background: rgba(255, 255, 255, 0.25);
+	}
 </style>

pages/component/commonComponents/video/staticadcomponent/index.css

@@ -1,44 +0,0 @@
-.ad-container
-{
-	display:none;
-	position:absolute;
-	left:50%;
-	top:50%;
-	margin-left:-150px;
-	margin-top:-100px;
-}
-
-.ad-container span
-{
-	width: 27px;
-    height: 16px;
-    border-radius: 1px;
-    background-color: rgba(0,0,0,.5);
-    position: absolute;
-    font-size: 10px;
-    color: #fff;
-    line-height: 16px;
-    text-align: center;
-    top:0px;
-    left:0px;
-}
-
-.ad-container .close
-{
-	position:absolute;
-	top:2px;
-	right:2px;
-	width: 20px;
-    height: 20px;
-}
-
-.ad-container .close:hover
-{
-	cursor:pointer;
-}
-
-.ad-container .ad
-{
-	width:300px;
-	height:200px;
-}

pages/component/commonComponents/video/staticadcomponent/index.js

@@ -1,76 +0,0 @@
-import $ from 'jquery'
-// const html = require('./index.html');
-// require('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css');
-
-// require('../aliplayer-min.js');
-// require('../aliplayercomponents.min.js');
-// require('../aliplayer-min.css');
-require('./index.css');
-
-
-/**
-* 静态广告组件
-*/
-const fullScreenButtonComponent = Aliplayer.Component({
-  /**
-  * 初始函数，在new对象时调用
-  *
-  * @param {string} adAddress - 广告视频地址
-  * @param {string} toAddress - 广告链接地址
-  */
-  init: function (adAddress, toAddress) {
-    this.adAddress = adAddress;
-    this.toAddress = toAddress;
-    this.$html = $('.ad-container');
-  },
-
-  /**
-  * 创建广告Dom元素
-  */
-  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 () {
-      Aliplayer.util.stopPropagation();
-    });
-    this.$html.find('.close').click(function () {
-      this.$html.hide();
-    });
-    $(el).append(this.$html);
-  },
-  ready: function (player, e) {
-  },
-  /**
-  * 隐藏广告
-  */
-  play: function (player, e) {
-    this.$html.hide();
-  },
-  /**
-  * 显示广告
-  */
-  pause: function (player, e) {
-    this.$html.show();
-  },
-  /**
-  * 隐藏广告
-  */
-  playing: function (player, e) {
-    this.$html.hide();
-  },
-  waiting: function (player, e) {
-  },
-  timeupdate: function (player, e) {
-  },
-  error: function (player, e) {
-  },
-  /**
-  * 显示广告
-  */
-  ended: function (player, e) {
-    this.$html.show();
-  }
-});
-
-export default fullScreenButtonComponent;

pages/component/commonComponents/video/videoDetail.vue

@@ -1,375 +0,0 @@
-<template>
-  <view class="container commonPageBox commonDetailPage" style="position: relative;">
-     <!-- <cover-view class="image_box">
-
-
-      <image
-     
-        src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"
-        mode="aspectFit"
-        class="headImage"
-        style="background-color: #f5f5f5"
-       
-      >
-      </image>
-
-
-
-    </cover-view> -->
-    <video
-      @fullscreenchange="fullscreenchange"
-      @timeupdate="videoTimeUpdateEvent($event)"
-      ref="videos"
-      style="width: 100%; height: 100%"
-      autoplay
-      id="videoId"
-      
-      object-fit="contain"
-      class="video-box"
-      :src="videoUrl"
-      :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
-      @play="playVideo"
-    >
-    <!-- <cover-image class="controls-play img"  src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
-      
-    -->
-  </video>
-  
-  </view>
-</template>
-
-<script>
-import courseDescription from "@/pages/component/commonComponents/list";
-import price from "../price/index.vue";
-
-import $http from "@/config/requestConfig.js";
-import { mapState } from "vuex";
-export default {
-  components: {
-    courseDescription, //课程说明
-    price, //课程价格
-  },
-  data() {
-    return {
-      timer: null,
-      videoUrl: "",
-      currentTime: 0,
-      firstTime: 0,
-
-      options: {},
-      videoData: {},
-      isSetFirstTime: false,
-      currentVideoTime: "", //初始播放时长（秒）
-      urlList: {
-        detail: "sociology/course/getCourseCatalogueChapterDetail",
-        curriculumInfo: "app/phone.do?getCourseInfo",
-      },
-    };
-  },
-  async onUnload() {
-    this.timer = null;
-    // #ifdef APP-PLUS
-    uni.navigateTo({
-      url: "/pages/curriculum/order/curriculum/back",
-    });
-   
-    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
-   
-    // plus.screen.lockOrientation("portrait-primary");
-    // #endif
-    await this.setVideoTime();
-
-    // #ifdef APP-PLUS
-    // plus.screen.lockOrientation("portrait-primary");
-    // #endif
-  },
-  onLoad(options) {
-    // uni.navigateTo({
-    //   url: "/pages/curriculum/order/curriculum/back",
-    // });
-    // #ifdef APP-PLUS
-    plus.screen.lockOrientation("landscape-primary");
-    // plus.screen.lockOrientation("portrait-primary");
-    // #endif
-
-    this.options = JSON.parse(options.data);
-    this.getLive();
-
-    this.timer = setInterval(() => {
-      var that = this;
-      if (this.currentTime) {
-        that.setVideoTime();
-      }
-    }, 60000 * 10);
-  },
-  onHide() {
-    // this.showSearchList = false
-    // this.searchList = []
-  },
-  computed: {
-    ...mapState(["userInfo"]),
-  },
-  methods: {
-    // 播放进度改变
-    videoTimeUpdateEvent(e) {
-      console.log("e at line 78:", e);
-      this.playTime = parseInt(e.detail.currentTime);
-      this.allTime = parseInt(e.detail.duration);
-      console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
-
-      this.recordTime({
-        time: this.playTime,
-      });
-    },
-
-    recordTime(data) {
-      this.currentTime = data.time;
-      console.log("data at line 54:", data);
-      var list = [];
-      if (uni.getStorageSync("videoList")) {
-        list = JSON.parse(uni.getStorageSync("videoList"));
-      }
-
-      console.log("点击后设置播放时长的方法list at line 65:", list);
-      var index = list.findIndex((e) => e.id == this.videoData.id);
-      if (list.length > 0 && index >= 0) {
-        list[index] = {
-          ...this.videoData,
-
-          time: data.time,
-        };
-      } else {
-        list.push({
-          ...this.videoData,
-          time: data.time,
-        });
-      }
-
-      uni.setStorageSync("videoList", JSON.stringify(list));
-
-      console.log(list, "走接口的方法参数");
-    },
-    //是否全屏
-    fullscreenchange(e) {
-      if (!e.target.fullScreen) {
-        uni.navigateBack({
-          delta: 1,
-        });
-        // plus.screen.lockOrientation("default");
-      }
-    },
-
-    getData(data) {
-      console.log(
-        "data at line 这是接口拿回来的时长11111111111111111111:",
-        this.videoData.userCourseVideoPositionEntity.position
-      );
-      if (!this.isSetFirstTime) {
-        var netWork = this.videoData.userCourseVideoPositionEntity
-          ? this.videoData.userCourseVideoPositionEntity.position
-          : 0;
-        var list = [];
-        if (uni.getStorageSync("videoList")) {
-          list = JSON.parse(uni.getStorageSync("videoList"));
-        }
-        console.log("这是获取接口 设置的起始时长", netWork);
-        var index = list.findIndex((e) => e.id == this.videoData.id);
-
-        if (netWork) {
-          if (index >= 0) {
-            this.firstTime =
-              list[index].time > netWork ? list[index].time : netWork;
-          } else {
-            this.firstTime = netWork ? netWork : 0;
-          }
-        } else {
-          if (index >= 0) {
-            this.firstTime = list[index].time ? list[index].time : 0;
-          } else {
-            this.firstTime = 0;
-          }
-        }
-
-        uni.setStorageSync("videoList", JSON.stringify(list));
-        console.log(
-          "list at line 这是设置完第一次初始值9777777777777777777770:",
-          list
-        );
-
-        console.log(this.firstTime, "1111111111111111111111");
-
-        this.playVideo();
-        this.isSetFirstTime = true;
-      }
-    },
-    setVideoTime(time) {
-      var data = {
-        videoId: this.videoData.id,
-        position: this.currentTime, //秒数
-      };
-      console.log("data at line =存储视频时长接口:", data);
-      $http
-        .request({
-          // url: "book/buyOrder/buySave",
-          url: `sociology/course/saveCoursePosition`,
-          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
-          data,
-          header: {
-            //默认 无 说明：请求头
-            "Content-Type": "application/json",
-          },
-        })
-        .then((res) => {
-          console.log("res at line 185:", res);
-          //   console.log("data at line 5911111:", this.videoData);
-          this.$forceUpdate();
-        });
-    },
-    playVideo(e) {
-      this.videoContext = uni.createVideoContext("videoId", this);
-
-      this.videoContext.seek(this.firstTime);
-      this.videoContext.requestFullScreen();
-    },
-    async getLive() {
-      var data = {
-        ...this.options,
-      };
-      console.log("data at line 57:", data);
-      $http
-        .request({
-          // url: "book/buyOrder/buySave",
-          url: `sociology/course/checkVideo`,
-          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
-          data,
-          header: {
-            //默认 无 说明：请求头
-            "Content-Type": "application/json",
-          },
-        })
-        .then((res) => {
-          console.log("res at line 252:", res);
-          this.videoData = res.video;
-          this.videoUrl =
-            // "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
-            res.video.videoUrl;
-
-          this.$nextTick(async () => {
-            await this.getData();
-          });
-          // var playAuth = res.video.playAuth.replace(/=/g, "");
-          // this.videoData = {
-          // 	...res.video,
-          // 	videoId: res.video.video,
-          // 	playAuth: playAuth,
-          // };
-          // this.playAuth = playAuth;
-
-          console.log("data at line 5911111:", this.videoData);
-          this.$forceUpdate();
-        });
-    },
-    openVideo(data) {
-      console.log("data at line 380:", data.type);
-
-      var mynavData = JSON.stringify(data); // 这里转换成 字符串
-      if (data.type == 0) {
-        //视频云点播
-        uni.navigateTo({
-          url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
-        });
-      } else if (data.type == 1) {
-        uni.navigateTo({
-          url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
-        });
-      }
-
-      //   uni.navigateTo({
-      //     // url: '../bookShop/commodityDetail?id=' + item.id
-      //     url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
-      //   });
-    },
-    hancleModalCancel() {
-      this.show = false;
-    },
-    handleClickMore(v, i, status) {
-      console.log("i at line 357:", i);
-      this.$set(this.correlationiList[i], "isOpen", status);
-      // [i].=!this.correlationiList[i].isOpen;
-    },
-    hancleModalConfirm() {
-      var data = {
-        values: {
-          customerType: "D",
-          token: uni.getStorageSync("token"),
-          customerOid: uni.getStorageSync("customerOid"),
-          ...this.taiHuClassInfo,
-        },
-      };
-      // $mars.progressBegin('申请中...');
-      // $mars.post(customerType, 'applyRelearn', data, function (ret) {
-      //     api.hideProgress();
-
-      //     fnLoadDataGrid();
-      // });
-    },
-
-    // 检查是有权限使用搜索功能
-    checkDisable() {
-      console.log("点击了");
-    },
-    // 显示无权限弹窗
-    // showNoRights() {
-    // 	let that = this
-    // 	uni.showModal({
-    // 		content: "",
-    // 		confirmText: '好的',
-    // 		showCancel: false,
-    // 		success: function(res) {
-    // 			if (res.confirm) {
-    // 				// console.log('用户点击确定');
-    // 				that.clear()
-    // 			}
-    // 		}
-    // 	})
-    // },
-
-    // 放大图片
-    previewImage(url) {
-      console.log(url);
-      uni.previewImage({
-        urls: [url],
-        longPressActions: {
-          itemList: ["很抱歉，暂不支持保存图片到本地"],
-          success: function (res) {
-            // console.log(res,'+++++')
-          },
-        },
-      });
-    },
-  },
-  onBackPress() {
-    // #ifdef APP-PLUS
-    plus.key.hideSoftKeybord();
-    // #endif
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-
-
-
-
-.video-box{
-  position: relative;
-}
-.image_box{
-  background-color: red;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>

pages/course/chapterDetailAndorid.vue

@@ -809,6 +809,7 @@
 					.then(async (res) => {
 						that.curriculumData = res.data.detail;
 						that.videoArray = res.data.videos;
+						console.log('视频列表:', that.videoArray);
 						//判断没有视频的情况
 						if(that.videoArray.length==0){