uni-app中视频大小变小时，播放图标怎么调小

在uni-app中，当你调整视频组件的大小时，通常需要相应地调整播放图标的尺寸，以保持UI的一致性。你可以通过自定义播放图标的样式或使用CSS来实现这一点。以下是一个示例，展示如何在uni-app中调整视频组件及其播放图标的大小。

示例代码

1. 在pages/index/index.vue文件中：

<template>
  <view class="container">
    <video
      class="video-element"
      :src="videoSrc"
      controls
      @loadedmetadata="adjustPlayIcon"
    >
      <!-- 自定义播放图标，通过伪元素实现 -->
      <view class="custom-play-icon"></view>
    </video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/your-video.mp4'
    };
  },
  methods: {
    adjustPlayIcon(event) {
      const videoElement = event.target;
      const playIcon = videoElement.querySelector('.custom-play-icon');
      // 假设你希望播放图标是视频宽度的10%
      const iconSize = videoElement.videoWidth * 0.1;
      playIcon.style.width = `${iconSize}px`;
      playIcon.style.height = `${iconSize}px`;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.video-element {
  width: 300px; /* 示例宽度，可以根据需要调整 */
  height: auto; /* 保持视频宽高比 */
  position: relative;
}

/* 自定义播放图标样式 */
.custom-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* 初始大小，将在adjustPlayIcon方法中调整 */
  height: 50px;
  background: url('~@/static/play-icon.png') no-repeat center center;
  background-size: contain;
  opacity: 0.8;
  pointer-events: none; /* 确保图标不会阻挡视频控制 */
}
</style>

说明

• 视频组件：使用<video>标签，并绑定src属性到视频文件的URL。
• 自定义播放图标：使用<view>标签作为播放图标的容器，并通过CSS进行样式定义。
• 调整图标大小：在<video>标签的@loadedmetadata事件中，获取视频元素的宽度，并据此调整播放图标的大小。这里假设播放图标是视频宽度的10%。
• 样式定义：通过CSS设置播放图标的初始大小、位置、背景图片等属性。

请注意，上述示例中的play-icon.png是你自定义的播放图标图片，你需要将其放置在项目的static目录中，并调整路径以匹配你的项目结构。