• uniapp自定义播放器

    问题描述：我是真无语啊，就是有一个目录切换的地方，然后切换音频，结果你猜怎么着，嘿，音频他不播放了。也就是下面这个方法都不进去了打印的时候，音频播放都播放不了了，我尝试了销毁在播也不行。然后我寻思着，我写代码相同的我也喜欢return出去，会不会是这个原因，结果抱着试一试的态度，好家伙，真这样。

    解决方法：在后台设置的时候，换成两个不同的音频进行切换就完事了。一般测试阶段才会出现，我觉得正式用，人家也不会放两个相同的视频在一个课程里面把，并且呢，这个在h5是好的，小程序才会出现。

    代码：

    1. <template>
    2. 	<view class="wrap" v-if="!loadding">
    3. 		<view class="videoWrap">
    4. 			<view class="videoBox">
    5. 				<template v-if="!videoPause">
    6. 					<view class="masterPic">
    7. 						<image class="img" :src="detail.video_image" mode="scaleToFill"></image>
    8. 					</view>
    9. 					<image class="startIcon" src="/static/image/bofang.png" mode="scaleToFill"  @click="startVideo"></image>
    10. 				</template>
    11. 				<template v-else>
    12. 					<video id="video" :src="detail.video_link" :autoplay="true" style="width: 100%;height: 100%"></video>
    13. 				</template>
    14. 			</view>
    15. 			<view class="contnet">
    16. 				<view class="title">{{ detail.title }}</view>
    17. 				<!-- <view class="num">视频已播放2596次</view> -->
    18. 				<view class="num">{{ detail.update_time }}</view>
    19. 			</view>
    20. 		</view>
    21. 		<view class="auditorWrap" v-if="detail.audio_image">
    22. 			<image class="imgAuditor" :src="detail.audio_image" mode="scaleToFill"></image>
    23. 			<view class="contnet">
    24. 				<view class="title">{{ detail.title }}</view>
    25. 				<view class="num">{{ detail.update_time }}</view>
    26. 			</view>
    27. 			<view class="auditorBox">
    28. 				<view class="iconList">
    29. 					<image class="icon" src="/static/image/bofang1.png" mode="scaleToFill" v-if="!status" @click="changeto"></image>
    30. 					<image class="icon" src="/static/image/zanting.png" mode="scaleToFill" v-else  @click="changeto"></image>
    31. 				</view>
    32. 				<view class="progressBox">
    33. 					<view class="progress">
    34. 						<view class="activeProgress" :style="{width:`${progress}%`}">
    35. 							<view class="activeRightBox">
    36. 								<view class="circle" v-show="progress > 0"></view>
    37. 							</view>
    38. 						</view>
    39. 					</view>
    40. 					<view class="timeBox">
    41. 						<view>{{ formatTime(currentTime) }}</view>
    42. 						<view>{{ formatTime(duration) }}</view>
    43. 					</view>
    44. 				</view>
    45. 			</view>
    46. 		</view>
    47. 		<view class="intro" v-if="detail.content">
    48. 			<view v-html="detail.content"></view>
    49. 		</view>
    50. 		<movable-area class="recordWrap">
    51. 			<movable-view :x="removeArea.x" :y="removeArea.y" direction="all" class="record">
    52. 				<view @click.stop="gotoRecourd">
    53. 					<image class="img" src="/static/image/recourdIcon.png" mode="scaleToFill"></image>
    54. 					<view class="label">课程目录</view>
    55. 				</view>
    56. 			</movable-view>
    57. 		</movable-area>
    58. 		<recourdVue :list="course.section" ref="recourdRef" />
    59. 	</view>
    60. </template>
    61.  
    62. <script>
    63. import utils from '@/common/utils.js';
    64. import recourdVue from './part/recourd.vue';
    65. const innerAudioContext = uni.createInnerAudioContext();
    66. export default {
    67. 	components: {
    68. 		recourdVue
    69. 	},
    70. 	data() {
    71. 		return {
    72. 			/*商品id*/
    73. 			section_id: null,
    74. 			course_id: null,
    75. 			course: {},
    76. 			/*商品详情*/
    77. 			detail: {},
    78. 			status: false,
    79. 			beforeAudio: true,
    80. 			duration: 0,
    81. 			currentTime: 0,
    82. 			progress: 0,
    83. 			xpjAudio: null,
    84. 			videoPause: false,
    85. 			videoContext: null,
    86. 			removeArea:{
    87. 				x: 0,
    88. 				y: 0,
    89. 			}
    90. 		};
    91. 	},
    92. 	onReady() {
    93. 		console.log("onReady")
    94. 		this.videoContext = uni.createVideoContext('video', this);
    95. 	},
    96. 	onLoad(e) {
    97. 		console.log("onLoad")
    98. 		this.videoPause = false;
    99. 		/*商品id*/
    100. 		let scene = utils.getSceneData(e);
    101. 		this.section_id = e.section_id ? e.section_id : scene.sid;
    102. 		this.course_id = e.course_id ? e.course_id : scene.cid;
    103. 		this.getSystemInfo();
    104. 	},
    105. 	mounted() {
    106. 		console.log("mounted") 
    107. 		/*获取产品详情*/
    108. 		this.getData();
    109. 	},
    110. 	methods: {
    111. 		getSystemInfo(){
    112. 			let self = this;
    113. 			uni.getSystemInfo({
    114. 				success(res) {
    115. 					self.removeArea.x = res.windowWidth - 70;
    116. 					self.removeArea.y = res.windowHeight - 120;
    117. 				}
    118. 			});
    119. 		},
    120. 		initAudit(){
    121. 			innerAudioContext.src = this.detail.audio_link;
    122. 			this.getAudioInfo();
    123. 		},
    124. 		getAudioInfo(){
    125. 			innerAudioContext.onCanplay(()=>{
    126. 				innerAudioContext.duration;
    127. 				setTimeout(() => {
    128. 					this.duration = innerAudioContext.duration;
    129. 					this.watchAuditTime();
    130. 				});
    131. 			})
    132. 		},
    133. 		watchAuditTime(){
    134. 			innerAudioContext.onTimeUpdate(() => {
    135. 				const { currentTime,duration} = innerAudioContext;
    136. 				this.currentTime = currentTime;
    137. 				if(this.duration == this.currentTime){
    138. 					this.progress = 100;
    139. 					this.status = false;
    140. 				}else{
    141. 					this.progress = currentTime/duration * 100;
    142. 				}
    143. 			});
    144. 		},
    145. 		gotoRecourd(){
    146. 			this.$refs.recourdRef.open(
    147. 				{
    148. 					section_id: this.section_id,
    149. 					course_id: this.course_id,
    150. 				}
    151. 			);
    152. 		},
    153. 		startVideo(){
    154. 			this.videoPause = true;
    155. 			this.$nextTick(()=>{
    156. 				this.videoContext.play();
    157. 			})
    158. 		},
    159. 		changeto(){
    160. 			this.status = !this.status;
    161. 			if (this.status) {
    162. 				innerAudioContext.play();
    163. 				innerAudioContext.onPlay(() => {
    164. 					// 播放监听
    165. 					console.log('播放!');
    166. 				});
    167. 			} else {
    168. 				innerAudioContext.pause()
    169. 				this.currenttime = innerAudioContext.currentTime
    170. 			}
    171. 		},
    172. 		/*获取数据*/
    173. 		getData() {
    174. 			let self = this;
    175. 			let section_id = self.section_id;
    176. 			let course_id = self.course_id;
    177. 			self.loadding = true;
    178. 			uni.showLoading({
    179. 				title: '加载中'
    180. 			});
    181. 			self._get(
    182. 				'course.course/sectionDetail', {
    183. 				course_id: course_id,
    184. 				section_id: section_id,
    185. 			},
    186. 				function (res) {
    187. 					const { data: { detail: { course, detail } } } = res;
    188. 					self.course = course;
    189. 					self.detail = detail;
    190. 					self.initAudit();
    191. 					self.loadding = false;
    192. 					uni.hideLoading();
    193. 				},
    194. 				function (err) {
    195.  
    196. 				}
    197. 			);
    198. 		},
    199. 		changeSwiper() {
    200. 			this.isVideoPlay = false;
    201. 		},
    202. 		formatTime(num) {
    203. 			num = Math.floor(num)
    204. 			let second = num % 60;
    205. 			if (second < 10) second = '0' + second;
    206. 			let min = Math.floor(num / 60);
    207. 			if (min < 10) min = '0' + min;
    208. 			return min + ":" + second;
    209. 		},
    210. 	}
    211. };
    212. </script>
    213.  
    214. <style lang="scss" scoped>
    215. .videoWrap,.auditorWrap {
    216. 	background: #fff;
    217.  
    218. 	.videoBox,.imgAuditor {
    219. 		width: 100%;
    220. 		height: 564rpx;
    221. 		position: relative;
    222.  
    223. 		.masterPic {
    224. 			height: 100%;
    225.  
    226. 			&::before {
    227. 				content: "";
    228. 				position: absolute;
    229. 				top: 0;
    230. 				left: 0;
    231. 				background: rgb(0, 0, 0, 0.45);
    232. 				width: 100%;
    233. 				height: 100%;
    234. 				z-index: 1;
    235. 			}
    236.  
    237. 			.img {
    238. 				width: 100%;
    239. 				height: 100%;
    240. 			}
    241. 		}
    242.  
    243. 		.startIcon {
    244. 			position: absolute;
    245. 			left: 50%;
    246. 			top: 50%;
    247. 			transform: translate(-50%, -50%);
    248. 			width: 92rpx;
    249. 			height: 92rpx;
    250. 			z-index: 10;
    251. 		}
    252. 	}
    253. 	.contnet{
    254. 		padding: 28rpx;
    255. 		.title{
    256. 			font-size: 32rpx;
    257. 			color: #333333;
    258. 			margin-bottom: 20rpx;
    259. 		}
    260. 		.num{
    261. 			font-size: 23rpx;
    262. 			color: #999999;
    263. 		}
    264. 	}
    265.  
    266. }
    267. .auditorWrap{
    268. 	margin-top: 20rpx;
    269. }
    270. .auditorBox{
    271. 	display: flex;
    272. 	gap: 16rpx;
    273. 	padding: 28rpx;
    274. 	.iconList{
    275. 		width: 62rpx;
    276. 		height: 62rpx;
    277. 		.icon{
    278. 			width: 100%;
    279. 			height: 100%;
    280. 		}
    281. 	}
    282. 	.progressBox{
    283. 		flex: 1;
    284. 	}
    285. 	.progress{
    286. 		width: 100%;
    287. 		height: 20rpx;
    288. 		background: #EDE8E8;
    289. 		border-radius: 20rpx;
    290. 		position: relative;
    291. 		.activeProgress{
    292. 			position: absolute;
    293. 			left: 0;
    294. 			top: 0;
    295. 			background: #F2473F;
    296. 			height: 100%;
    297. 			border-radius: 20rpx;
    298. 			transition: width 1s ease;
    299. 			.activeRightBox{
    300. 				position: relative;
    301. 				height: 100%;
    302. 				.circle{
    303. 					width: 42rpx;
    304. 					height: 42rpx;
    305. 					background: #FFFFFF;
    306. 					border: 2rpx solid #F2473F;
    307. 					box-shadow: 0px 5rpx 5rpx 0px rgba(0,0,0,0.1);
    308. 					border-radius: 50%;
    309. 					position: absolute;
    310. 					right: 0;
    311. 					top: -12rpx;
    312. 				}
    313. 			}
    314. 		}
    315. 	}
    316. 	.timeBox{
    317. 		display: flex;
    318. 		justify-content: space-between;
    319. 		color: #F2473F;
    320. 		font-size: 32rpx;
    321. 		padding-top: 8rpx;
    322. 	}
    323. }
    324. .intro{
    325. 	margin-top: 20rpx;
    326. 	padding: 28rpx;
    327. 	background: #fff;
    328. }
    329. .recordWrap{
    330. 	position: fixed;
    331. 	bottom: 0;
    332. 	top: 0;
    333. 	width: 100vw;
    334. 	height: 100vh;
    335. 	pointer-events: none;
    336. }
    337. .record{
    338. 	width: 111rpx;
    339. 	height: 111rpx;
    340. 	background: linear-gradient(45deg, #F2473F, #F26E2F);
    341. 	border-radius: 50%;
    342. 	position: relative;
    343. 	pointer-events: visible;
    344. 	.img{
    345. 		width: 54rpx;
    346. 		height: 53rpx;
    347. 		position: absolute;
    348. 		top: 40%;
    349. 		left: 50%;
    350. 		transform: translate(-50%,-50%);
    351. 	}
    352. 	.label{
    353. 		width: 131rpx;
    354. 		height: 43rpx;
    355. 		line-height: 43rpx;
    356. 		background: linear-gradient(45deg, #F2473F, #F26E2F);
    357. 		box-shadow: 0px 5rpx 5rpx 0px rgba(9,2,4,0.25);
    358. 		font-size: 26rpx;
    359. 		color: #fff;
    360. 		text-align: center;
    361. 		position: absolute;
    362. 		bottom: -10rpx;
    363. 		left: -8rpx;
    364. 		border-radius: 20rpx;
    365. 	}
    366. }
    367. </style>

    recourd.vue 子组件

    1. <template>
    2.     <view class="recourdMask" v-if="show">
    3.         <view class="recourdBox">
    4.             <view class="closeIcon" @click="closeIcon">
    5.                 <u-icon name="close" color="#424242" size="40rpx"></u-icon>
    6.             </view>
    7.             <view class="title">课程目录</view>
    8.             <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="content" scroll-with-animation="true">
    9.                 <view class="list">
    10.                     <view class="item" v-for="v in list" :key="v" @click="gotoLook(v)">
    11.                         <view class="txt">{{ v.title }}</view>
    12.                         <view class="status" v-if="v.is_see == 1">试学</view>
    13.                     </view>
    14.                 </view>
    15.             </scroll-view>
    16.         </view>
    17.     </view>
    18. </template>
    19.  
    20. <script>
    21. 	export default {
    22.         props: {
    23.             list: {
    24.                 type: Array,
    25.                 default: [],
    26.             }
    27.         },
    28. 		components: {},
    29. 		data() {
    30. 			return {
    31.                 params: {},
    32.                 show: false,
    33. 			}
    34. 		},
    35. 		methods: {
    36.             open(params){
    37.                 this.params = params;
    38.                 this.show = true;
    39.             },
    40.             gotoLook(v){
    41.                 if(v.payStatus == 0 || v.is_see == 0){
    42.                     uni.showToast({
    43.                         icon: 'none',
    44.                         title: '此章节需要购买后查看'
    45.                     });
    46.                     return
    47.                 }
    48.                 this.params.section_id = v.section_id;
    49.                 this.gotoPage(`pages/knowledge/course/section-detail?section_id=${this.params.section_id}&course_id=${this.params.course_id}`,'redirect');  
    50.             },
    51.             closeIcon(){
    52.                 this.show = false;
    53.             }
    54.         }
    55. 	}
    56. </script>
    57.  
    58. <style lang="scss">
    59. .recourdMask{
    60.     position: fixed;
    61.     bottom: 0;
    62.     background: rgba(0,0,0,0.45);
    63.     top: 0;
    64.     width: 100%;
    65.     height: 100%;
    66.     z-index: 10;
    67.     .recourdBox{
    68.         position: fixed;
    69.         bottom: 0;
    70.         height: 882rpx;
    71.         background: #fff;
    72.         width: 100%;
    73.         border-top-left-radius: 20rpx;
    74.         border-top-right-radius: 20rpx;
    75.         z-index: 2;
    76.         .list{
    77.             padding: 20rpx;
    78.             padding-top: 0;
    79.             box-sizing: border-box;
    80.             .item{
    81.                 display: flex;
    82.                 justify-content: space-between;
    83.                 align-items: center;
    84.                 background: #F5F6F8;
    85.                 padding: 26rpx 22rpx;
    86.                 box-sizing: border-box;
    87.                 border-radius: 20rpx;
    88.                 margin-bottom: 20rpx;
    89.             }
    90.         }
    91.         .title{
    92.             font-size: 32rpx;
    93.             font-weight: bold;
    94.             color: #333333;
    95.             text-align: center;
    96.             height: 124rpx;
    97.             line-height: 124rpx;
    98.         }
    99.         .status{
    100.             width: 112rpx;
    101.             height: 48rpx;
    102.             text-align: center;
    103.             line-height: 48rpx;
    104.             background: rgba(249,156,49,0.15);
    105.             font-size: 22rpx;
    106.             color: #F2473F;
    107.             border-radius: 20rpx;
    108.         }
    109.         .txt{
    110.             font-size: 26rpx;
    111.             color: #666666;
    112.         }
    113.     }
    114.     .content{
    115.         height: 882rpx;
    116.     }
    117.     .closeIcon{
    118.         position: absolute;
    119.         right: 28rpx;
    120.         top: 28rpx;
    121.     }
    122. }
    123. </style>

    实现效果

    目前呢，这个播放器还没有做拖动的。这个得后续优化。

  • 相关阅读:
    第11/100天 阅读笔记
    Linux中如何禁止普通用户使用su命令
    ctf-pikachu-CSRF
    Java#28(集合进阶1---单列集合)
    网络安全入门学习资源汇总
    《OpenHarmony开源鸿蒙学习入门》-- 状态管理
    Linux Shell编程第5章——文件的排序、合并和分割
    MyBatis 中如何实现分页 ？
    自动创建设备节点udev机制实现
    自己更换尾插的视频教程
  • 原文地址：https://blog.csdn.net/weixin_45638909/article/details/133135170