|
|
@@ -0,0 +1,115 @@
|
|
|
+<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>
|
wangguoyu