# 開源說明
開源省錢兄短劇系統(tǒng)的播放視頻模塊（寫了測試弄了好久才弄出來、最核心的模塊、已經(jīng)實戰(zhàn)了），使用uniapp技術(shù)，提供學(xué)習(xí)使用，支持IOS+Android+H5+微信小程序，使用Hbuilder導(dǎo)入即可運行

#注意：由于app環(huán)境下ios跟Android存在差異，故需要分別適配
##index.nvue文件默認(rèn)為Android版本，打包則用這個
##如果打ios包，請把index_IOS.nvue改名為index.nvue,原來的index.nvue改為其他名稱打包即可
#打安卓包同樣操作即可

下載地址

https://download.csdn.net/download/weixin_39706415/88483448文章來源地址http://www.zghlxwxcb.cn/news/detail-726254.html

<template>
	<view>
		<swiper :circular="true" class="swipers" @change="change" :current="current" :vertical="true"
			:indicator-dots="false" :autoplay="false" :interval="3000" :duration="300">
			<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
				<view class="swipers-items">
					<!-- 視頻 -->
					<video @timeupdate="timeupdate" @waiting="waiting()" object-fit="cover"
						v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
						codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
						@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
						:poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl" :autoplay="item.autoPlay"
						class="swipers-items-video"></video>
					<!-- :autoplay="item.autoPlay" -->
					<!-- 沒有視頻權(quán)限則顯示封面圖 -->
					<image v-else @click="showPay = true" :src="item.titleImg" class="swipers-items-imgsbg"
						mode="aspectFill"></image>
					<!-- 返回圖標(biāo) -->
					<!-- <u-icon name="arrow-left" @click="goBack()" class="swipers-items-back" :style="{top:meunTop+'px'}"
						color="#ffffff" size="38"></u-icon> -->
					<!-- 視頻信息 -->
					<view class="swipers-items-info">
						<!-- 標(biāo)題 -->
						<view class="swipers-items-info-title">
							{{item.courseDetailsName}}
						</view>
						<!-- 簡介 -->
						<view class="swipers-items-info-content" v-html="item.content">

						</view>
						<!-- 集數(shù) -->
						<view @click="openShow()" class="swipers-items-info-num">
							第{{item.num}}集（共{{meunList.length}}集）選集 >
						</view>
					</view>
					<!-- 右側(cè)操作 -->
					<view class="swipers-items-right">
						<view class="swipers-items-right-item">
							<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
								<u-icon name="heart-fill" v-if="item.isGood!=0" color="red" size="60"></u-icon>
								<u-icon name="heart-fill" v-else color="#ffffff" size="60"></u-icon>

							</view>
							<view class="swipers-items-right-item-txt">
								{{item.goodNum}}
							</view>
						</view>
						<view class="swipers-items-right-item" @click="share(item)">
							<view class="swipers-items-right-item-img">

								
							</view>
							<view class="swipers-items-right-item-txt">
								分享
							</view>
						</view>
						<view class="swipers-items-right-item" v-if="item.isCollect == 0">
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
							</view>
							<view class="swipers-items-right-item-txt">
								追劇
							</view>
						</view>
						<view class="swipers-items-right-item" v-else>
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
								</image>
							</view>
							<view class="swipers-items-right-item-txt">
								已追
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-popup :closeable="true" close-icon="arrow-down" close-icon-size="40" close-icon-color="#ffffff"
			:mask-custom-style="maskCustomStyle" v-model="show" height="800rpx" border-radius="24" mode="bottom">
			<view class="list">
				<view class="list-title flex align-center">
					<u-icon name="list" class="list-title-icon" color="#ffffff" size="40"></u-icon>
					當(dāng)前播放第{{num}}個視頻
				</view>
				<view class="list-box">
					<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true"
						style="width: 100%;height: 700rpx;padding-bottom: 30rpx;">
						<view :id="item.viewInfo" class="list-box-item flex justify-between" @click="selectPlay(item)"
							v-for="(item,index) in meunList" :key="index">
							<view class="list-box-item-l">
								<image :src="item.titleImg" mode="aspectFill"></image>
							</view>
							<view class="list-box-item-r">
								<view class="list-box-item-r-title flex align-center justify-between">
									第{{index+1}}集
									<view class="list-box-item-r-title-t" v-if="('video'+index) == scrollIntoView">
										正在播放
									</view>
								</view>
								<view class="list-box-item-r-titles">
									《{{item.courseDetailsName}}》
								</view>
								<view class="list-box-item-r-content" v-html="item.content">

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- 購買視頻 -->
		<u-popup :closeable="true" :custom-style="customStyle" :safe-area-inset-bottom="false" close-icon="arrow-down"
			close-icon-size="40" close-icon-color="#ffffff" :mask-custom-style="maskCustomStyle" v-model="showPay"
			border-radius="24" mode="bottom">
			<view class="list">
				<view class="list-title flex align-center">
					<u-icon name="lock" class="list-title-icon" color="#efbb6b" size="40"></u-icon>
					當(dāng)前視頻 沒有播放權(quán)限
				</view>
				<view class="list-item">
					<view class="list-item-box" @click="payVideo(1)">
						購買整部視頻
					</view>

				</view>
				<view class="list-item">
					<view class="list-item-box" @click="payVideo(2)">
						購買單集視頻
					</view>
				</view>
				<view class="list-item" v-if="isVips == '是'">
					<view class="list-item-box" @click="goNav('/pages/me/vip/index')">
						開通會員
					</view>
				</view>
			</view>
		</u-popup>
		<!-- #ifndef MP-WEIXIN -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#fff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：圖片地址 QrSrc：二維碼圖片地址  
		Title：標(biāo)題 PriceTxt：價格 OriginalTxt：原始價格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<u-popup width="686" v-model="showImg" mode="center" border-radius="14">
			<image :show-menu-by-longpress='true' :src="haibaoImg" style="width: 100%;" mode="widthFix"></image>
		</u-popup>
	</view>
</template>

<script>
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				customStyle: {
					background: '#202020'
				},
				isStart: false, //是否開始生成二維碼
				erweima: '',
				qrCodeData: '',
				haibaoImg: '',
				showImg: false,
				haibaoShow: false,
				title: '',
				imgSrc: '',
				current: 0,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				show: false,
				videoList: [],
				videoContext: null, //記錄當(dāng)前視頻的上下文
				isVIP: false, //是否是vip
				courseId: '',
				meunList: [], //菜單
				meunTop: 0, //返回圖標(biāo)距離頂部的距離
				num: 1, //當(dāng)前播放的集數(shù)
				showPay: false, //購買視頻的彈窗
				info: {}, //整部的信息
				courseDetailsId: '', //詳情id
				scrollIntoView: '', //當(dāng)前播放視頻的位置
				scrollIntoViews: 'video0', //當(dāng)前播放視頻的位置
				isVips: '否', //是否顯示會員
			};
		},
		computed: {
			swiperList() {
				return this.videoList
			}
		},
		onLoad(e) {
			// #ifdef MP-WEIXIN
			if (e.scene) { //這里為線上操作
				//此處的二維碼  page/index/index?brokerId=123
				let scene = decodeURIComponent(e.scene);
				scene = scene.split(',')
				uni.setStorageSync('invitation', scene[0])
				this.courseId = scene[1]
				this.courseDetailsId = scene[2]
				this.getDataList(this.courseId, this.courseDetailsId);
			}
			// #endif
			if (e.invitation) {
				uni.setStorageSync('invitation', e.invitation)
			}
			if (e.id) {
				this.courseId = e.id
				if (e.courseDetailsId) {
					this.courseDetailsId = e.courseDetailsId
				}
				console.log(this.courseDetailsId, '跳轉(zhuǎn)進來的id')
				this.getDataList(this.courseId, this.courseDetailsId);
			}
			this.getDataList()
		},
		onShow() {
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
			let that = this
			uni.$on('back', (data) => {
				if (data.flag == true) {
					that.showPay = false
					that.getDataList(that.courseId, that.courseDetailsId, true);
				}
			})
		},
		onReady() {
			// #ifdef MP-WEIXIN
			let info = uni.getMenuButtonBoundingClientRect()
			this.meunTop = info.top + ((info.height - 19) / 2)
			// #endif
			// #ifndef MP-WEIXIN
			this.meunTop = 37
			// #endif
		},
		watch: {
			//監(jiān)聽當(dāng)前播放的集數(shù)
			current() {
				this.comNumVideo()
			}
		},
		methods: {
			//播放進度變化回掉
			timeupdate(e) {
				//隱藏loding
				uni.hideLoading()
			},
			//緩沖中
			waiting(e) {
				//在h5狀態(tài)下視頻出現(xiàn)緩沖則顯示loding
				// #ifdef H5
				uni.showLoading()
				// #endif
			},
			openShow() {
				this.show = true
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
				})

			},
			/**
			 * @param {String} path //返回的二維碼地址
			 */
			qrR(path) {
				this.qrCodeData = path
				this.haibaoShow = true

			},
			//生成失敗
			posterError() {
				this.haibaoImg = ''
				this.showImg = false
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.showToast({
					title: '海報生成失敗',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			/**生成成功
			 * @param {String} img 成功回調(diào)的圖片
			 */
			posterSuccess(img) {
				this.haibaoImg = img.tempFilePath
				this.showImg = true
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.hideLoading()
				uni.showToast({
					title: '長按圖片保存海報',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			//分享
			share(item) {
				this.imgSrc = item.titleImg
				// #ifndef MP-WEIXIN
				let urls = config.APIHOST2 + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
					.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode')
				this.erweima = urls
				this.isStart = true
				// #endif


				// #ifdef MP-WEIXIN
				let that = this
				let data = {
					invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
						.courseDetailsId,
					page: 'me/detail/detail'
				}
				uni.downloadFile({
					url: config.APIHOST + '/app/invite/mpCreateQr?invitationCode=' + data.invitationCode +
						'&page=' + data.page,
					success(res) {
						if (res.statusCode === 200) {
							that.qrCodeData = res.tempFilePath
							that.haibaoShow = true
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '分享失敗',
								icon: 'none'
							})
						}
					}
				})
				// #endif
			},
			/**
			 * @param {Object} type 類型 
			 * 1:購買整部視頻
			 * 2:購買單集視頻
			 */
			payVideo(type) {
				//處理數(shù)據(jù)跳轉(zhuǎn)支付
			},
			//去開通會員
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			//收藏
			shoucang(item) {
				//此處調(diào)用收藏接口
			},
			//點贊
			dianzan(item) {
				//此處調(diào)用點贊接口
			},
			//計算正在觀看哪個視頻
			comNumVideo() {
				let courseDetailsId = this.videoList[this.current].courseDetailsId
				this.meunList.map((item, index) => {
					if (item.courseDetailsId == courseDetailsId) { //找到了
						this.num = item.num
					}
				})
			},
			//選擇集數(shù)后在更新剩下的數(shù)據(jù)
			setVideoList(index) {
				//判斷后續(xù)是否還有兩條視頻
				let lengths = this.meunList.length - (index + 1)
				//有最少兩條
				if (lengths >= 2) {
					//直接拿兩條賦值進去
					this.videoList = [...this.videoList, ...this.meunList.slice(index + 1, index + 3)]
				}
				//只剩一條數(shù)據(jù)
				if (lengths == 1) {
					//把剩下的一條給放進去
					this.videoList = [
						//選中的那條
						...this.videoList,
						//身下的一條
						this.meunList[this.meunList.length - 1],
						//最后一條則放總數(shù)組的第一條
						this.meunList[0]
					]
				}
				//選擇的就是最后一條數(shù)據(jù)
				if (lengths == 0) {
					//后兩條拿總數(shù)組的前兩條就可以了
					this.videoList = [...this.videoList, ...this.meunList.slice(0, 2)]
				}
				//更新視圖
				this.$forceUpdate()
			},
			//選擇播放
			selectPlay(item) {
				// 根據(jù)選擇的courseDetailsId拿到meunList列表中的相同數(shù)據(jù)的下標(biāo)
				const index = this.meunList.findIndex(menu => menu.courseDetailsId === item.courseDetailsId);
				this.videoList = [this.meunList[index]]
				this.current = 0
				//重新計算一下當(dāng)前觀看的是哪個視頻
				this.comNumVideo()
				// 把選擇的視頻的自動播放設(shè)置為true
				this.videoList[this.current].autoPlay = true
				//讓當(dāng)前選擇的視頻播放
				this.startPlay(this.current)
				//更新視圖
				this.$forceUpdate()
				//關(guān)閉選擇彈窗
				this.show = false
				//記錄當(dāng)前播放位置
				this.scrollIntoView = 'video' + index
				//插入歷史記錄
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
					.courseDetailsId)
				//等視圖跟新完了，把之前剩下的數(shù)據(jù)補進去在$nextTick中處理
				this.$nextTick(() => {
					this.setVideoList(index)
				})
			},
			// 資源詳情（//此處獲取視頻的資源數(shù)據(jù)，處理數(shù)據(jù)）
			getDataList(id, courseDetailsId, type) {
				//以下為測試數(shù)據(jù)，實際請用接口獲取
				let videoList = [
					{
						courseId:1,//視頻id
						courseDetailsId:1,//當(dāng)前視頻id
						courseDetailsName:'回到古代當(dāng)太zi4',//視頻標(biāo)題
						content:'回到古代當(dāng)太zi4',//視頻簡介
						isGood:0,//是否點贊 1:點贊 0:未點贊
						isCollect:0,//是否追劇 1:已追 0:未追
						goodNum:1,//點贊數(shù)量
						videoUrl:'https://sdp003.wanshibao.com:49/m3u8/5cfewiWOsb9LUzdXoF8CY_nJ_nYB-TxjUPg8FEnaGwXdEHWmLOzdcwfxYHH9cMAtsiYJ_eP4pBudI9Q.m3u8',//視頻播放地址
						titleImg:'https://sdp003.wanshibao.com:49/m3u8/pic/1a77B6xVZnZRDq-p5qMzR6lGtqvEAqQArAihNz9Ixp-w5lB2qhr1HE6UbwTozBi_8LOhsoevKxw.jpg',//視頻封面圖片
					},
					{
						courseId:1,//視頻id
						courseDetailsId:2,//當(dāng)前視頻id
						courseDetailsName:'回到古代當(dāng)太zi5',//視頻標(biāo)題
						content:'回到古代當(dāng)太zi5',//視頻簡介
						isGood:0,//是否點贊 1:點贊 0:未點贊
						isCollect:0,//是否追劇 1:已追 0:未追
						goodNum:1,//點贊數(shù)量
						videoUrl:'https://sdp003.wanshibao.com:49/m3u8/e3132AbBDNItEc6T23Zo_RveoW5xpWSLYANwcPoJuJ3eFKMwUn9srZ5iW6g_Xw1_c3JcOvIHjD4S2rI.m3u8',//視頻播放地址
						titleImg:'https://sdp003.wanshibao.com:49/m3u8/pic/bed1wbZXz-Gjf4qwoKwmJ0y5L8UkWz65whyMJfJaW0XPwapPPr-z-teVOs4cwjJ2rbqlxo2mUWE.jpg',//視頻封面圖片
					},
					{
						courseId:1,//視頻id
						courseDetailsId:3,//當(dāng)前視頻id
						courseDetailsName:'回到古代當(dāng)太zi6',//視頻標(biāo)題
						content:'回到古代當(dāng)太zi6',//視頻簡介
						isGood:0,//是否點贊 1:點贊 0:未點贊
						isCollect:0,//是否追劇 1:已追 0:未追
						goodNum:1,//點贊數(shù)量
						videoUrl:'https://sdp003.wanshibao.com:49/m3u8/82afKKYJ2yza-iPefiofrJ0A6hcJ8UnJcWLvv9RVGoW3FcNqvG3JmrQZy5l00w6VYcIroikyCxD3lII.m3u8',//視頻播放地址
						titleImg:'https://sdp003.wanshibao.com:49/m3u8/pic/15a5xE-c8eR_k76QA86VgjeHYUCZF_18TvT7QJzLH5HnHvWNlHdmBzIOdWxUj54uY9prCZdXU1o.jpg',//視頻封面圖片
					},
					{
						courseId:1,//視頻id
						courseDetailsId:4,//當(dāng)前視頻id
						courseDetailsName:'回到古代當(dāng)太zi7',//視頻標(biāo)題
						content:'回到古代當(dāng)太zi7',//視頻簡介
						isGood:0,//是否點贊 1:點贊 0:未點贊
						isCollect:0,//是否追劇 1:已追 0:未追
						goodNum:1,//點贊數(shù)量
						videoUrl:'https://sdp003.wanshibao.com:49/m3u8/4333NUZUz_Asi9Bq19Fszc_yUKUWSG2Fj04N7-PDWng3xsm3fk4cCg7dqOTY4D4VBoiP3SC6_ZpJiIo.m3u8',//視頻播放地址
						titleImg:'https://sdp003.wanshibao.com:49/m3u8/pic/ec4epSaxrB3IxB3oe6k4F2THW4nbSyKMZHmACkwvMlNmQQYwp7awyhJt-bB8Xey-2uJl8eDz9Sg.jpg',//視頻封面圖片
					}
				]
				videoList.map((item,index)=>{
					item.num = index + 1
					if (item.videoUrl) {
						item.autoPlay = false
					} else {
						item.autoPlay = false
					}
					item.viewInfo = 'video' + index
				})
				//菜單數(shù)組
				this.meunList = videoList
				if (type == true) { //購買視頻后返回的
					let courseDetailsId = this.videoList[this.current].courseDetailsId
					this.meunList.some((item) => {
						if (item.courseDetailsId == courseDetailsId) {
							this.videoList[this.current].videoUrl = item.videoUrl
							//自動播放
							this.startPlay(this.current)
						}
						return true
					})
				} else { //直接跳轉(zhuǎn)進來的
					let indexs = -1
					if (courseDetailsId) { //從記錄進來的
						this.meunList.map((item, index) => {
							if (item.courseDetailsId == courseDetailsId) {
								indexs = index
							}
						})
						if (indexs != -1) { //找到了
							if (Number(indexs + 1) === this.meunList.length) { //最后一條
								if (this.meunList.length == 1) { //只有一條
									this.videoList = this.meunList.slice(0, 3)
								} else if (this.meunList.length == 2) {
									this.videoList = this.meunList.slice(0, 3)
								} else {
									this.videoList = [
										this.meunList[this.meunList.length - 1],
										this.meunList[0],
										this.meunList[1],
									]
								}
				
							} else if (Number(indexs) === Number(this.meunList.length - 1)) { //倒數(shù)第二條
								if (this.meunList.length == 1) { //只有一條
									this.videoList = this.meunList.slice(0, 3)
								} else if (this.meunList.length == 2) { //有兩條的時候
									this.videoList = [
										this.meunList[1],
										this.meunList[0],
									]
								} else {
									this.videoList = [
										this.meunList[this.meunList.length - 2],
										this.meunList[this.meunList.length - 1],
										this.meunList[0],
									]
								}
				
							} else {
								//如果不是最后一條，也不是倒數(shù)第二條，則從找到的位置開始往后拿三條數(shù)據(jù)放入數(shù)組
								this.videoList = this.meunList.slice(indexs, indexs + 3)
							}
						} else {
							//沒找到直接拿前三條數(shù)據(jù)即可
							this.videoList = this.meunList.slice(0, 3)
						}
					} else { //新的視頻
						// //視頻數(shù)組//直接拿前三條
						this.videoList = this.meunList.slice(0, 3)
						indexs = 0
					}
					console.log(this.videoList)
					//重新計算當(dāng)前在播放哪個視頻
					this.comNumVideo()
					if (indexs != -1 && this.meunList.length > 0) {
						this.$nextTick(() => {
							this.scrollIntoView = 'video' + indexs
						})
				
					}
				}
				let numIdCurr = this.videoList[0].courseDetailsId
				this.videoContextId = 'myVideo' + numIdCurr
				this.$nextTick(() => {
					this.videoContext = uni.createVideoContext(this.videoContextId, this)
					this.videoContext.play()
				})
				this.$forceUpdate()
				//插入歷史記錄
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
					.courseDetailsId)
			},
			//記錄歷史記錄
			setHistor(courseId, courseDetailsId) {
				// 這邊調(diào)用接口記錄觀看歷史
			},
			//swiper上下切換事件
			change(e) {
				//拿出當(dāng)前的swiper索引
				let current = Number(e.detail.current)
				// 根據(jù)courseDetailsId在meunList中找到這個數(shù)據(jù)的下標(biāo)
				let indexs = -1;
				//考慮向上滑動的時候
				// 有三條的時候
				if (current == 2 && this.current == 0) {
					//向上滑到頭的時候先拿第一條數(shù)據(jù)的courseDetailsId
					let courseDetailsId = this.videoList[0].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs != -1) { //找到了，indexs就是對應(yīng)下標(biāo)
						//先判斷meunList數(shù)組剩下的元素是否夠三條
						const lengths = (this.meunList.slice(0, indexs)).length
						if (lengths >= 3) { //夠三條
							// 因為輪播圖開啟了首尾銜接,所以在滑動到尾部重新進入第一頁之前替換全部數(shù)據(jù)為之前的三條
							//因為slice(str,end)，包含str，不包含end，所以拿三條數(shù)據(jù)則-3
							this.videoList = this.meunList.slice(indexs - 3, indexs)
						} else { //不夠三條
							let arr = new Array(3)
							switch (lengths) {
								//只有一條
								case 1:
									//只有一條的時候需要給數(shù)組補兩條湊夠三條，把meunList數(shù)組的前兩條拿出來補在后面
									arr[2] = this.meunList[indexs - 1] //把剩下的一條取出來放到要滑動的那一頁
									//因為剩下的數(shù)據(jù)不夠了，則拿meunList末尾的兩條數(shù)據(jù)補齊
									//第二個用最后一條數(shù)據(jù)
									arr[1] = this.meunList[this.meunList.length - 1]
									//第一個用倒數(shù)第二條數(shù)據(jù)
									arr[0] = this.meunList[this.meunList.length - 2]
									//賦值
									this.videoList = arr
									break;
									//只有二條
								case 2:
									//還剩下兩條數(shù)據(jù)的時候
									//把剩下的倒數(shù)第一條取出來放到要滑動的那一頁
									arr[2] = this.meunList[indexs - 1]
									//把剩下的最后一條放到第二個元素
									arr[1] = this.meunList[indexs - 2]
									//最后一個元素則由meunList的最后一條補齊
									arr[0] = this.meunList[this.meunList.length - 1]
									//最后賦值
									this.videoList = arr
									break;
								default:
									//一條都沒有的時候 [1,2,3,4,5,6]
									//直接把meunList末尾的三條放入數(shù)組即可
									this.videoList = this.meunList.slice(-3)
									break;
							}
						}
					}
				}
				//考慮向下滑動
				if (current == 0 && this.current == 2) { //是否滑動到第一條，雖然剛進入頁面current為0，但是首次不觸發(fā)
					//拿出當(dāng)前的courseDetailsId
					let courseDetailsId = this.videoList[2].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					//記錄當(dāng)前數(shù)據(jù)在meunList中的下標(biāo)
					if (indexs != -1) { //找到了，indexs就是對應(yīng)下標(biāo)
						//先判斷meunList數(shù)組剩下的元素是否夠三條
						const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length
						if (lengths >= 3) { //夠三條
							// 因為輪播圖開啟了首尾銜接,所以在滑動到尾部重新進入第一頁之前替換全部數(shù)據(jù)為之后的三條
							this.videoList = this.meunList.slice(indexs + 1, indexs + 4)
						} else { //不夠三條
							let arr = new Array(3)
							switch (lengths) {
								//只有一條
								case 1:
									//只有一條的時候需要給數(shù)組補兩條湊夠三條，把meunList數(shù)組的前兩條拿出來補在后面
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[0]
									arr[2] = this.meunList[1]
									this.videoList = arr
									break;
								case 2:
									//只有二條
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[indexs + 2]
									arr[2] = this.meunList[0]
									this.videoList = arr
									break;
								default:
									//剛好沒有數(shù)據(jù)了 直接拿meunList的前三條數(shù)據(jù)
									this.videoList = this.meunList.slice(0, 3)
									break;
							}
						}
					}
				}
				//獲取當(dāng)前播放的視頻在菜單數(shù)組中的位置
				let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
					.courseDetailsId)
				//記錄當(dāng)前播放位置
				this.scrollIntoView = 'video' + scrollIndex
				//控制播放
				this.startPlay(current)
				//設(shè)置輪播圖索引
				this.current = current
				//插入歷史記錄
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId)
			},
			startPlay(current) {
				if (this.videoContext) { //判斷之前是否有視頻的上下文
					this.videoContext.stop()
					this.videoContext = null
				}
				let numIdCurr = this.videoList[current].courseDetailsId
				if (this.videoList[current].videoUrl) { //已經(jīng)購買可直接播放
					// 播放時記錄當(dāng)前播放的id
					this.videoContextId = 'myVideo' + numIdCurr
					this.videoContext = uni.createVideoContext(this.videoContextId, this)
					this.$nextTick(() => {
						//播放當(dāng)前的
						this.videoContext.play()
						this.$forceUpdate()
					})


				} else { //沒有視頻鏈接則表示沒有權(quán)限，需要購買 彈出購買彈窗
					this.showPay = true
				}
			},
			//播放時的回調(diào)
			videoPlay(videoId) {
				//此處可以做一些自己的操作

			},
			//監(jiān)聽視頻播放完成
			ended() {
				//此處可以自動播放下一集
				// // 查看是否有下一個視頻
				// if(this.current < this.videoList.length){
				// 	// 有則自動翻到下一個視頻
				// 	this.current += 1
				// }
			},
			//返回
			goBack() {
				uni.navigateBack()
			},
		},
	}
</script>

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

	/deep/.u-drawer-bottom {
		background-color: #202020 !important;
	}

	.list {
		width: 100%;
		height: 100%;
		background-color: #202020;
		color: #ffffff;
		margin: 40rpx 0;

		.list-title {
			height: 100rpx;
			width: 100%;
			// padding-top: 30rpx;
			font-size: 32rpx;
			font-weight: bold;

			.list-title-icon {
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

		}

		.list-item {
			padding: 0 30rpx;

			.list-item-box {
				width: 100%;
				line-height: 90rpx;
				background-color: #fff;
				color: #000;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
				border-radius: 20rpx;
			}

		}

		.list-box {
			width: 100%;
			height: calc(100% - 100rpx);
		}

		.list-box-item {
			width: calc(100% - 40rpx);
			height: auto;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		.list-box-item-l {
			width: 140rpx;
			height: 100%;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}

		.list-box-item-r {
			width: calc(100% - 160rpx);
			height: 100%;
			color: #ffffff;
			font-size: 32rpx;

			.list-box-item-r-title {
				width: 100%;
				font-weight: bold;
			}

			.list-box-item-r-title-t {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #5074FF;
			}

			.list-box-item-r-titles {
				margin-top: 10rpx;

			}

			.list-box-item-r-content {
				width: 100%;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 10rpx;
				overflow: hidden; //超出的文本隱藏
				display: -webkit-box;
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}
		}
	}

	.swipers {
		width: 100%;
		height: 100vh;

		.swipers-item {
			width: 100%;
			height: 100%;
		}

		.swipers-items {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #000;
		}

		.swipers-items-imgsbg {
			position: absolute;
			width: 100%;
			height: 90%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.swipers-items-video {
			width: 100%;
			height: 100%;
		}

		.swipers-items-back {
			position: absolute;
			// top: 75rpx;
			left: 20rpx;
			z-index: 999;
		}

		.swipers-items-info {
			width: 80%;
			height: auto;
			position: absolute;
			bottom: 100rpx;
			left: 20rpx;
			color: #ffffff;
			font-size: 30rpx;
			z-index: 999;

			.swipers-items-info-content {
				margin-top: 10rpx;
				font-size: 26rpx;
			}

			.swipers-items-info-num {
				margin-top: 20rpx;
			}
		}

		.swipers-items-right {
			width: 60rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translate(0, -50%);
			z-index: 999;

			.swipers-items-right-item {
				width: 100%;
				margin-bottom: 40rpx;
			}

			.swipers-items-right-item-img {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.swipers-items-right-item-txt {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				font-weight: bold;
				margin-top: 10rpx;
			}
		}
	}
</style>

到了這里，關(guān)于省錢兄短劇短視頻視頻滑動播放模塊源碼支持微信小程序h5安卓IOS的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！