kailin_mp/pages/video/detail.vue

<template>
	<view>
		<view class="video_play" v-if="videoInfo.video_src">
			<video id="myVideo" class="video_control" :src="videoInfo.video_src" @timeupdate="timeUpdate" :enable-progress-gesture="false" :enable-play-gesture="true"></video>
		</view>
		<view class="video_title">{{videoInfo.name}}</view>
		<view class="rich_text">
			<rich-text :nodes="videoInfo.content"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoInfo:{
					id:0,
					name:"",
					content:"",
					video_src:""
				},
				// 请求参数
				requestParam: {
				  id: 0
				},
				isReqing:false,
				videoContext:null,
			}
		},
		onLoad(param) {
			// 参数接收
			this.requestParam.id = param.id;
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
			  withShareTicket: true,
			  menus: ["shareAppMessage", "shareTimeline"],
			});
			// #endif
		},
		onShareAppMessage(obj) {
			return {
				title: `999智控终端平台\n${this.videoInfo.title}`,
				path: "/pages/video/detail?id=" + this.videoInfo.id,
				promise: new Promise((resolve, reject) => {
				  this.$http.request("api/share_message/get_item", { item_id: this.videoInfo.id, pages: "/pages/video/detail" }).then((callback) => {
					console.log(callback, "api/share_message/get_item");
					let obj = {
					  title: callback.data?.title == "" ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
					  path: "/pages/video/detail?id=" + this.videoInfo.id,
					};
					if (callback.data?.image_url !== "") {
					  obj.imageUrl = callback.data.image_url;
					}
					resolve(obj);
				  });
				}),
			};
		},
		onReady: function (res) {
			
		},
		onShow() {
			// 如果存在产品ID的话
			if (this.requestParam.id > 0) {
			  // 请求详情
			  this.$http.request("api/video_course/get_detail", this.requestParam).then((re) => {
			    // 成功渲染数据
			    if (re.code == "success") {
			      // 刷新数据
			      this.videoInfo = re.data;
				  // 获取视频容器的上下文
				  this.videoContext = uni.createVideoContext('myVideo');
				  // 暂停播放
				  this.videoContext.stop();
			    } else {
			      if (re.code != "no_login") {
			        uni.showModal({
			          content: re.msg,
			          showCancel: false,
			        });
			      }
			    }
			  });
			}
		},
		methods: {
			timeUpdate(event){
				// 播放到对应的
				if( event.detail.currentTime ){
					
					
				}
			}
		}
	}
</script>

<style lang="less">
	.video_play{
		width: 750rpx;
		display: block;
		font-size: 36rpx;
		overflow: hidden;
		font-weight: bold;
		line-height: 60rpx;
		background-color: #FFFFFF;
		.video_control{
			width: 750rpx;
			display: block;
			font-size: 36rpx;
			overflow: hidden;
			font-weight: bold;
			line-height: 60rpx;
			background-color: #FFFFFF;
		}
	}
	.video_title{
		width: 700rpx;
		display: block;
		font-size: 36rpx;
		overflow: hidden;
		font-weight: bold;
		line-height: 60rpx;
		padding: 0rpx 25rpx;
		padding-top: 60rpx;
		background-color: #FFFFFF;
	}
	.video_time{
		width: 700rpx;
		color: #999999;
		display: block;
		font-size: 26rpx;
		overflow: hidden;
		line-height: 40rpx;
		padding: 0rpx 25rpx;
		background-color: #FFFFFF;
	}
	.rich_text{
		width: 700rpx;
		display: block;
		overflow: hidden;
		font-size: 26rpx;
		margin: 0rpx auto;
		min-height: 800rpx;
		line-height: 50rpx;
		padding: 10rpx 25rpx;
		background-color: #FFFFFF;
		[alt] {
		  //web_view图片
		  max-width: 100%; // 避免图片超宽
		  vertical-align: bottom; // 避免图片之间间隙
		}
	}
	.video_poster{
		width: 700rpx;
		display: block;
		overflow: hidden;
		margin: 6rpx auto;
		padding: 10rpx 25rpx;
		background-color: #FFFFFF;
		.poster_img{
			width: 700rpx;
			display: block;
		}
	}
	.read_total{
		width: 700rpx;
		color: #999999;
		display: block;
		font-size: 26rpx;
		overflow: hidden;
		line-height: 60rpx;
		padding: 0rpx 25rpx;
		margin-bottom: 122rpx;
		background-color: #FFFFFF;
	}
	.handle_box {
	  left: 0rpx;
	  width: 700rpx;
	  height: 120rpx;
	  display: block;
	  position: fixed;
	  overflow: hidden;
	  padding: 20rpx 25rpx;
	  background-color: #FFFFFF;
	  bottom: var(--window-bottom);
	  border-top: 2rpx solid #DDDDDD;
	  .click_box{
		  border: none;
		  float: right;
		  display: block;
		  height: 120rpx;
		  padding: 0rpx 0rpx;
		  line-height: 120rpx;
		  margin-right: 20rpx;
		  font-size: 24rpx !important;
		  background-color: transparent;
		  .uni-icons{
			  font-size: 36rpx !important;
		  }
	  }
	  .click_box::after{
		  border: none;
		  background-color: transparent;
	  }
	}
</style>