uniapp video手动静音

### 如何在 UniApp 中通过代码控制 Video 组件实现手动静音

为了实现在 UniApp 应用程序中对 `video` 组件的手动静音功能，可以利用 Vue.js 提供的数据绑定特性以及事件处理机制来改变视频的声音状态。下面展示了一个具体的例子，在这个例子中，当点击按钮时会切换视频的静音属性。

#### 修改后的模板部分

<template>
  <view class="content">
    <!-- 使用v-bind动态绑定muted属性 -->
    <video 
      :src="videoSrc"
      :autoplay="true"
      :muted="isMuted"
      id="video"
      @fullscreenchange="handleFullscreenChange"
    ></video>

    <!-- 添加一个用于切换静音状态的按钮 -->
    <button @click="toggleMute">Toggle Mute</button>
  </view>
</template>

#### 脚本逻辑调整

<script>
export default {
  data() {
    return {
      isMuted: true, // 初始状态下设为静音
      videoSrc: "../../static/div3-modal.mp4",
    };
  },
  methods: {
    handleFullscreenChange(event){
      console.log(event.detail.fullScreen);
      this.isMuted = !event.detail.fullScreen;
    },

    toggleMute(){
      // 反转当前的静音状态
      this.isMuted = !this.isMuted;
    }
  }
};
</script>

上述代码实现了两个主要的功能：

- 当用户点击“Toggle Mute”按钮时，`toggleMute()` 方法会被调用来反转 `isMuted` 数据项的状态，从而达到切换静音的效果[^1]。

- 在全屏变化的时候自动取消静音操作，这与原始需求相匹配，即非全屏模式下默认静音而全屏则开启声音。

这种设计不仅满足了最初的需求——允许开发者根据应用程序的具体情况灵活地管理视频播放的行为，同时也保持了良好的用户体验[^2]。