点击添加视频,添加选定视频,并创建video,视频播放,点击声音控制icon改变video播放声音状态
![2***@qq.com](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/86/46/22_avatar_mid.jpg?v=0)
- 发布:2022-02-11 13:39
- 更新:2022-02-11 14:25
- 阅读:1439
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 11.6
HBuilderX类型: 正式
HBuilderX版本号: 3.3.11
手机系统: iOS
手机系统版本号: iOS 14
手机厂商: 苹果
手机机型: iPhone X
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
点击声音icon可以控制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>
![FullStack](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/73/57/99_avatar_mid.jpg?v=1717238592)
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