tab切换终止播放语音，当一个视频正在播放时，点击其他视频播放停止当前，文字的展开收起（小程序）

于 2020-03-19 15:46:07 发布
阅读量1.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/abc_26zm/article/details/96337398

tab切换终止播放语音，当一个视频正在播放时，点击其他视频播放停止当前，文字的展开收起

话不多说
wxml

<view class="services_container">
    <view class='top'>
        <block wx:for="{{['视频','音频']}}">
            <view bindtap='onTabsItemTap' data-index='{{index}}' class="top-item">
                <text class="{{currentTabsIndex==index?'on':''}}">{{item}}</text>
            </view>
        </block>
    </view>
    <view class='box'>
        <view class='video' hidden="{{currentTabsIndex!=0}}">
            <block wx:for="{{videoList}}">
                <view class='video-item'>
					<view class='wrapper'>
						<video class='video-video' wx:if='{{index==videoIndex}}' id='video{{index}}' autoplay='{{true}}' show-center-play-btn="{{false}}" src='{{item.resource_add}}'></video>
						<image class='video-video2' wx:if='{{index!=videoIndex}}' mode='aspectFill' src='{{item.coverimg}}'></image>
						<image class='videoPlay' wx:if='{{index!=videoIndex}}' data-index='{{index}}' bindtap='videoPlay' src='/images/play.png'></image>
					</view>
                    <view class='video-name'>{{item.title}}</view>
                    <view class='video-desc' style="{{item.upStatus?'':'display:-webkit-box'}}">{{item.description}}</view>
                    <view class='video-bottom'>
                        <view class='video-btn' data-index="{{index}}" bindtap='upDown'>
                            <image hidden='{{item.upStatus}}' src='/images/slide.png'></image>
                            <image hidden='{{!item.upStatus}}' src='/images/up.png'></image>
                            <text>{{!item.upStatus?'展开':'收起'}}</text>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <view class='audio' hidden="{{currentTabsIndex!=1}}">
            <block wx:for="{{audioList}}">
                <view class='audio-item'>
                    <view class='audio-left'>
                        <image class='audio-audio' src='{{item.coverimg}}'></image>
                        <image class='audio-status' hidden='{{musicIndex==index}}' data-index='{{index}}' bindtap='musicPlay' data-src="{{item.resource_add}}" src='/images/play.png'></image>
                        <image class='audio-status' hidden='{{musicIndex!=index}}' data-index='{{index}}' bindtap='musicPause' data-src="{{item.resource_add}}" src='/images/pause.png'></image>
                    </view>
                    <view class='audio-content'>
                        <view class='audio-name'>{{item.title}}</view>
                        <view class='audio-desc'>{{item.description}}</view>
                    </view>
                    <view class='audio-right'>
                        <image hidden='{{musicIndex!=index}}' src='/images/playing.gif'></image>
                    </view>
                </view>
            </block>
        </view>
    </view>
    <audio src='{{audioSrc}}' loop='{{true}}' style='display:none'></audio>
</view>
	```

//获取音频上下文
const backgroundAudioManager = wx.getBackgroundAudioManager();

Page({

    /**
     * 页面的初始数据
     */
	data: {
		isLoadedAll: false,
		musicIndex: null,
		videoIndex: null,
		currentTabsIndex: 0,
		pageIndex: 1,
		videoList: [
			{
				'coverimg':"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description':"这是第一个示例，这是第一个示例，这是第一个示例，这是第一个示例。这是第一个示例，这是第一个示例，这是第一个示例，这是第一个示例。",
				'id':"41",
				'resource_add':"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
				'title':" 第三期 Beatles 02",
				'type':"1"
			},
			{
				'coverimg': "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description': "",
				'id': "42",
				'resource_add': "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
				'title': " 第三期 Beatles 02",
				'type': "1"
			},
			{
				'coverimg': "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description': "",
				'id': "43",
				'resource_add': "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
				'title': " 第三期 Beatles 02",
				'type': "1"
			},
			{
				'coverimg': "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description': "",
				'id': "44",
				'resource_add': "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
				'title': " 第三期 Beatles 02",
				'type': "1"
			},
		],
		audioList:[
			{
				'coverimg': "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description': "这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，",
				'id': "50",
				'resource_add': "http://zhangmenshiting.qianqian.com/data2/music/6c2983881c95968fbb0f4fd334c5d526/599527734/599527734.mp3?xcode=7c9d9130f46d992ba0cc505dc0621a48",
				'title': "音频1",
				'type': "1"	
			},
			{
				'coverimg': "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584613939122&di=ab71ccd565dabbfb0a8e9270a1ff2690&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85475571.jpeg",
				'description': "这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，这是第1个示例音频，",
				'id': "51",
				'resource_add': "http://zhangmenshiting.qianqian.com/data2/music/6c2983881c95968fbb0f4fd334c5d526/599527734/599527734.mp3?xcode=7c9d9130f46d992ba0cc505dc0621a48",
				'title': "音频2",
				'type': "1"
			}
		]
	},

    /**
     * 生命周期函数--监听页面加载
     */
	onLoad: function (options) {
		//加载数据
		//这里数据写死，假装我是在服务器拿到的数据
	},

	//tap切换
	onTabsItemTap: function (event) {
		var index = event.currentTarget.dataset['index'];
		this.setData({
			currentTabsIndex: index
		});
		//tab切换时停止音乐播放
		backgroundAudioManager.stop();

		//tab切换时停止视频播放
		var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex);
		videoContextPrev.stop();

		//将当前播放视频、音频的index设置为空
		this.setData({
			musicIndex: null,
			videoIndex: null,
		})
	},
	//展开
	//原本没有upStatus这个字段，所以默认值为false
	upDown(event) {
		var index = event.currentTarget.dataset['index'];
		this.data.videoList[index].upStatus = !this.data.videoList[index].upStatus;
		this.setData({
			videoList: this.data.videoList
		})
	},
	//播放音频
	musicPlay(event) {
		var src = event.currentTarget.dataset['src'];
		var index = event.currentTarget.dataset['index'];
		this.setData({
			musicIndex: index,
			audioSrc: src
		});
		
		backgroundAudioManager.src = src;
		backgroundAudioManager.play()

	},
	//停止音频
	musicPause(event) {
		this.setData({
			musicIndex: null
		});
		backgroundAudioManager.pause();
	},
	//播放视频
	videoPlay(event) {
		var length = this.data.videoList.length;
		var index = event.currentTarget.dataset['index'];

		if (!this.data.videoIndex) { // 没有播放时播放视频
			this.setData({
				videoIndex: index
			})
			var videoContext = wx.createVideoContext('video' + index)
			videoContext.play()
		} else {
			//停止正在播放的视频
			var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex)
			videoContextPrev.stop()
			//将点击视频进行播放
			this.setData({
				videoIndex: index
			})
			var videoContextCurrent = wx.createVideoContext('video' + index)
			videoContextCurrent.play()
		}
	},

	
})

.top {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 80rpx;
    background-color: #fff;
    border-bottom: solid 1px #efefef;
}

.top-item {
    line-height: 80rpx;
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 30rpx;
    color: #666;
    padding: 0 20rpx;
}

.top-item text {
    display: inline-block;
    line-height: 80rpx;
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 30rpx;
    color: #666;
    padding: 0 20rpx;
}

.on {
    border-bottom: solid 2px #db363e;
}

.box {
    display: flex;
    flex-direction: column;
    width: 690rpx;
    margin: auto;
}

.video {
    display: flex;
    flex-direction: column;
}

.video-item {
    padding: 40rpx 0;
    border-bottom: solid 1px #efefef;
}
.wrapper{
	    width: 690rpx;
    height: 400rpx;
	position: relative;
}
.video-video {
    width: 690rpx;
    height: 400rpx;
}
.video-video2 {
    width: 690rpx;
    height: 400rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}
.videoPlay{
	position: absolute;
    width: 60rpx;
    height: 60rpx;
    top: 50%;
    left: 50%;
    margin: -30rpx 0 0 -30rpx;
	z-index: 100;
}

.video-name {
    margin-top: 10rpx;
    font-family: PingFangSC-Medium;
    font-size: 34rpx;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.video-desc {
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #666;
    margin-top: 10rpx;
    /* display: -webkit-box; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.video-bottom {
    display: flex;
    justify-content: flex-end;
}

.video-btn {
    margin-top: 20rpx;
    width: 103rpx;
    height: 39rpx;
    border: solid 1px #d2d2d2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.video-btn image {
    width: 19rpx;
    height: 12rpx;
    margin-right: 10rpx;
}

.video-btn text {
    font-family: PingFangSC-Regular;
    font-size: 22rpx;
    color: #999;
}

.audio {
    display: flex;
    flex-direction: column;
}

.audio-item {
    padding: 40rpx 0;
    border-bottom: solid 1px #efefef;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.audio-left {
    width: 204rpx;
    height: 152rpx;
    position: relative;
    margin-right: 20rpx;
}

.audio-audio {
    width: 204rpx;
    height: 152rpx;
}

.audio-status {
    position: absolute;
    width: 60rpx;
    height: 60rpx;
    top: 50%;
    left: 50%;
    margin: -30rpx 0 0 -30rpx;
}

.audio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.audio-name {
    font-family: PingFangSC-Medium;
    font-size: 34rpx;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.audio-desc {
    margin-top: 10rpx;
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.audio-right {
	width: 30rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
}

.audio-right image {
    width: 25rpx;
    height: 29rpx;
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值