uniProject/pages/study/lookShipin2.vue

<template>
  <view class="video-container">
    <video
      id="myVideo"
      :src="videoUrl"
      controls
      @timeupdate="updateCurrentTime"
      @seeked="onVideoSeeked"
      ref="videoPlayer"
    ></video>
    <cover-view class="markers-container" @click="onMarkerClick">
      <block v-for="(marker, index) in markers" :key="index">
        <cover-view
          class="marker"
          :style="{ left: marker.position + 'px' }"
          :data-time="marker.time"
        >
          <!-- 标记点的内容，可以是时间、图标等 -->
          {{ marker.time.toFixed(2) }}s
        </cover-view>
      </block>
    </cover-view>
	
	
	
	
  </view>
</template>


<script>
	export default {
		data() {
			return {
					videoUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', // 替换为你的视频URL
			      currentTime: 0,
			      markers: [
			        // 初始标记点，可以根据需要动态添加
			        // { time: 10, position: 0 }, // 示例标记点，时间单位为秒，位置根据视频宽度和视频时长计算
			      ],
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
			this.addMarker(10);
		},
		methods: {
			updateCurrentTime(event) {
			  this.currentTime = event.detail.currentTime;
			  // 这里可以添加逻辑来更新标记点的位置（如果标记点位置是动态计算的话）
			},
			onVideoSeeked(event) {
			  // 视频跳转后的处理（如果需要的话）
			},
			addMarker(time) {
			  // 计算标记点的位置
			  const videoElement = this.$refs.videoPlayer;
			  const videoDuration = videoElement.duration;
			  const videoWidth = videoElement.$el.offsetWidth; // 获取视频元素的实际宽度
			  const markerPosition = (time / videoDuration) * videoWidth;
			
			  // 添加标记点到数组中
			  this.markers.push({
			    time,
			    position: markerPosition,
			  });
			
			  // 如果需要，可以对markers数组进行排序
			},
			onMarkerClick(event) {
			  // 获取点击的标记点的时间
			  const target = event.target;
			  const markerTime = parseFloat(target.dataset.time);
			
			  // 跳转到对应的视频时间
			  const videoElement = this.$refs.videoPlayer;
			  console.log(videoElement)
			  console.log(this.videoContext)
			  this.videoContext.seek(markerTime);
			},
		}
	}

</script>

<style>
.video-container {
  position: relative;
  width: 100%; /* 或者你想要的视频宽度 */
}

.markers-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止标记容器干扰视频操作，但我们需要点击事件，所以稍后会在marker上设置pointer-events:auto */
  display: flex;
  align-items: center; /* 使标记点垂直居中 */
}

.marker {
  position: absolute;
  top: 10px; /* 或者你想要的标记点距视频顶部的距离 */
  background-color: rgba(255, 0, 0, 0.5);
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: auto; /* 允许点击事件 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
</style>