国学经典，讲书视频

pages/talkBook/talkBookDetail.vue

@@ -26,6 +26,7 @@
 					</view>
 				</view>
 			</view>
+			
 			<view class="imagesBox flexbox" v-if="swiperImages.length > 0" style="overflow: hidden;">
 				<!-- swiperImages -->
 				<view class="item" v-for="(item, index) in swiperImages" :key="index">
@@ -33,6 +34,14 @@
 				</view>
 
 			</view>
+			<view class="video" v-if="videoUrl != ''">
+				<!-- 视频形式的任务 -->
+				<view class="taskinfo">
+					<video id="myVideo" :poster="poster" :src="videoUrl"
+						@error="videoErrorCallback" controls></video>
+				</view>
+			</view>
+			
 			<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
 			<view class="content" v-else></view>
 			<!-- 	<view class="time">
@@ -184,6 +193,10 @@
 				emoji: [],
 				windowWidth: 0,
 				voicesImg: '',
+				videoContext: null,
+				innerAudioContext: null, // 音频对象
+				videoUrl:'',
+				poster: '',
 				isBuy: false,
 				playData: {},
 				teachId: null, // 讲书id
@@ -241,6 +254,11 @@
 			// console.log('onUnload----',this.paused)
 			this.audio.destroy() // 销毁播放器
 		},
+		onReady() {
+			this.videoContext = uni.createVideoContext('myVideo')
+			this.innerAudioContext = uni.createInnerAudioContext();
+			this.innerAudioContext.autoplay = false;
+		},
 		computed: {
 			...mapState(['userInfo'])
 		},
@@ -380,6 +398,8 @@
 							this.audio.onCanplay((e) => {
 								this.duration = this.audio.duration.toFixed() // 初始化进度条和音频秒数
 							})
+							
+							this.videoUrl=res.bookTeach.video
 
 							// this.isBuy = res.book.isBuy
 							// this.freeChapterCount = res.book.freeChapterCount
@@ -664,7 +684,17 @@
 				this.emojiIcon = 'cuIcon-emoji';
 				this.$emit('foc')
 			},
-
+			
+			
+			// 视频
+			videoErrorCallback: function(e) {
+				// uni.showModal({
+				// 	content: e.target.,
+				// 	showCancel: false
+				// })
+			},
+			
+			
 			onReachBottom() {
 				console.log('到底了')
 				if (this.pPage + 1 <= this.pTotal) {
@@ -1012,4 +1042,12 @@
 		display: block;
 		width: 30px;
 	}
+	
+	.video {
+		text-align:center;
+		margin: 30rpx 0;
+		#myVideo{
+			width: 100%;
+		}
+	}
 </style>