2***@qq.com
2***@qq.com
  • 发布:2022-02-11 13:39
  • 更新:2022-02-11 14:25
  • 阅读:1439

【报Bug】uniapp开发的app,在ios端 动态创建的video,无法通过muted属性动态改变video的声音

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.6

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iPhone X

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

点击添加视频,添加选定视频,并创建video,视频播放,点击声音控制icon改变video播放声音状态

预期结果:

点击声音icon可以控制video的声音

实际结果:

点击声音icon无法控制video的声音

bug描述:

ios 进入页面时是没有video标签的,当选择添加视频时,创建video,视频播放成功后,无法动态改变声音状态(静音/声音) 自定义isMuted的值变成true,视频仍然有声音

<template>  
  <!-- 视频预览 -->  
  <view class="preview-box">  
    <view class="videoapp-box-size video-box">  
      <view class="videoapp-flex videoapp-wrap video-content">  
        <view class="videoapp-box-size" v-if="videoSrc !=0 && videoSrc !=1">  
          <video class="videoapp-relative video" :src="videoSrc" :custom-cache="false" :play-strategy="3"  
            :autoplay="true" :muted="isMuted" :enable-progress-gesture="false"  
            @error="videoErrorCallback">  
          </video>  
        </view>  
        <view class="videoapp-flex videoapp-align-center videoapp-justify-center videoapp-box-size" v-else  
          @click.stop="chooseVideo">  
          <view class="videoapp-absolute videoapp-text-center" v-if="videoSrc==0">  
            <text class="videoapp-mar-t32 videoapp-text-sm videoapp-text-center videoapp-color-fff">添加视频  
            </text>  
          </view>  
          <view class="videoapp-absolute videoapp-text-center" v-else>  
            <text  
              class="videoapp-mar-t32 videoapp-text-sm videoapp-text-center videoapp-color-fff">请求失败,暂时无法播放  
            </text>  
          </view>  
        </view>  
      </view>  
    </view>  
    <view class="videoapp-flex videoapp-wrap videoapp-mar-t32 videoapp-pad-b24 videoapp-bg-fff">  
      <image class="videoapp-icon-sm" @click="voice"  
        :src="isMuted?'../../static/images/video/muted.png':'../../static/images/video/icon2.png'" mode="">  
      </image>  
    </view>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        videoSrc: 0,  
        isMuted: false  
      }  
    },  
    methods: {  
      // 声音  
      voice() {  
        if (this.isMuted) {  
          uni.showToast({  
            title: '开启声音',  
            icon: 'none'  
          })  
        } else {  
          uni.showToast({  
            title: '关闭声音',  
            icon: 'none'  
          })  
        }  
        this.isMuted = !this.isMuted  
      },  
      // 添加预览视频  
      chooseVideo(index) {  
        this.videoSrc =  
          'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4'  
      },  
      // 视频播放出错时  
      videoErrorCallback(index) {  
        this.videoSrc=1  
      },  
    }  
  }  
</script>  

<style lang="scss">  
  page {  
    background-color: #F6F6FB;  
  }  

  .video-box {  
    width: 750rpx;  
    height: 841rpx;  
    background-color: #000000;  
    padding-top: 75rpx;  
    padding-bottom: 76rpx;  

    .add-icon {  
      width: 144rpx;  
      height: 144rpx;  
    }  

    .video-content {  
      width: 750rpx;  
      height: 690rpx;  
      background-color: #474747;  
      overflow: hidden;  
    }  

    .play-icon {  
      width: 68rpx;  
      height: 68rpx;  
    }  
  }  

  .tool-item {  
    text-align: center;  
    width: 187.5rpx;  
  }  

  .icon-box {  
    width: 94rpx;  
    height: 94rpx;  
    margin-left: auto;  
    margin-right: auto;  
    background: #F6F7F9;  
  }  

  .originBg {  
    background: #F6F7F9;  
  }  

  .activeBg {  
    background: rgba(60, 138, 255, 0.1);  
  }  

  .video {  
    width: 100%;  
    height: 100%;  
  }  

  .cover-view {  
    width: 100%;  
    height: 70%;  
  }  

  .video-item {  
    border: 1rpx solid #FFFFFF;  
  }  

  .video-item-active {  
    border-color: #3C8AFF !important;  
  }  

  .screen-shot {  
    right: 0;  
    bottom: 0;  
    z-index: 10000;  
    width: 300rpx;  
  }  

  .close-icon {  
    right: 10rpx;  
    top: 10rpx;  
  }  

  .right-tool {  
    right: 32rpx;  
    top: 210rpx;  
  }  

  .full-screen {  
    right: 32rpx;  
    bottom: 32rpx;  
  }  
</style>  
2022-02-11 13:39 负责人:天生DR 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

可以呀,
你代码这一行会报错,this.toolList[2].title = '静音' ,去掉就可以了

  • 2***@qq.com (作者)

    这个忘了去掉了,之前代码比较多,精简了一下上传的

    2022-02-11 15:57

  • FullStack

    回复 2***@qq.com: 我这边测试可以,动态改变声音,你运行官方demo看看

    2022-02-11 16:24

  • 2***@qq.com (作者)

    回复 FullStack:哥,他这个官方demo是一开始有video标签的,我这个问题是一开始没有video标签,当我动态添加视频时,创建一个video标签,这个时候video静音再ios上无法控制

    2022-02-11 16:32

  • FullStack

    回复 2***@qq.com: 我是在你的代码上测试的,可以呀

    2022-02-11 16:36

  • 2***@qq.com (作者)

    回复 FullStack: 找到原因了,我本地写的视频的src数据是在vuex里面写着的

    2022-02-14 08:46

该问题目前已经被锁定, 无法添加新回复