新增页面

pages.json

@@ -520,11 +520,15 @@
 		{
 			"root": "pages/video",
 			"pages": [{
-				"path": "index",
-				"style": {
-					"navigationStyle": "custom"
+					"path": "index",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "video"
 				}
-			}]
+			]
 		},
 		//九寨沟分包
 		{

pages/video/components/player-video.vue

+<template>
+	<view class="container">
+		<!--播放按钮-->
+		<image v-if="!isPlay" class="play-img" @click="videoPlayed" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
+		 mode=""></image>
+		<view class="videoTitle">{{videoName}}</view>
+		<video :show-center-play-btn="false" class="video-view" id="myVideo" ref="myVideo" :src="videoUrl" :poster="videoCoverImg"
+		 :controls="controls" :show-loading="true" @timeupdate="handleTimeUpdate" @loadedmetadata="loadedmetadata"
+		 @fullscreenchange="fullscreenchange" @play="playChange" @pause="pauseChange" @ended="ended">
+			<cover-view class="videoControlsContainer flex justify-center">
+				<cover-image v-if="!isPlay" class="play-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
+				 @click="videoPlayed" mode="aspectFill"></cover-image>
+				<cover-image v-else class="pause-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_start.png"
+				 @click="videoPause" mode="aspectFill"></cover-image>
+				<view class="slideBox">
+					<!--slider自定义播放控件-->
+					<slider @changing="sliderDown" style="margin: 0;" :value="value" @change="sliderChange" activeColor="#FFFFFF"
+					 backgroundColor="rgba(0, 0, 0, 0.45)" block-color="#4263EB" :block-size="14" />
+				</view>
+				<!--播放时间-->
+				<p class="custdownTime">{{computedTime(nowPlayTime)}}</p>
+			</cover-view>
+		</video>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		components: {},
+		props: [
+			"videoUrl", //视频地址
+			"videoCoverImg", //视频封面图
+			"videoName", //视频名称
+			"vWidth", //视频宽
+			"vHeight" //视频高
+		],
+		data() {
+			return {
+				videoPlay: 0,
+				videoContext: null,
+				videoDuration: 0, //总播放时长
+				isPlay: false, //判断是否播放
+				nowPlayTime: 0, //当前播放时间
+				value: 0, //当前滑块的值
+				controls: false, //是否隐藏默认控制器
+				isEnd: false, //播放是否结束
+				sliderAble: true,
+				isSliderIng: false
+			};
+		},
+		onReady() {
+			this.videoContext = uni.createVideoContext('myVideo', this);
+		},
+		onLoad() {
+
+		},
+		methods: {
+			/**
+			 * 播放
+			 */
+			videoPlayed() {
+				this.videoContext.play()
+			},
+			/**
+			 * 暂停
+			 */
+			videoPause() {
+				this.videoContext.pause()
+			},
+			/**
+			 * 滑块进行拖动进度播放
+			 */
+			sliderChange(e) {
+				this.isSliderIng = false
+				const t = e.detail.value / 100
+				this.videoContext.seek(t * this.videoDuration);
+				this.nowPlayTime = t * this.videoDuration
+				console.log(t * this.videoDuration);
+			},
+			/**
+			 * 播放后触发方法，获得播放总时长
+			 */
+			handleTimeUpdate(e) {
+				// 设置滑块位置
+				if (!this.isEnd && !this.isSliderIng) {
+					this.value = this.nowPlayTime / this.videoDuration * 100
+				}
+				// 设置当前时间
+				this.nowPlayTime = e.detail.currentTime
+				// 首次获取到duration时存储它
+				if (this.videoDuration === 0 && e.detail.duration > 0) {
+					this.videoDuration = e.detail.duration;
+				}
+			},
+			/**
+			 * 初始化获得视频总时长
+			 */
+			loadedmetadata(e) {
+				this.nowPlayTime = e.detail.duration
+			},
+			computedTime(minutesAndSeconds) {
+				let totalSeconds = Math.floor(minutesAndSeconds) * 60 + Math.round((minutesAndSeconds % 1) * 60);
+				let hours = Math.floor(totalSeconds / 3600);
+				let minutes = Math.floor((totalSeconds % 3600) / 60);
+				hours = hours.toString().padStart(2, '0');
+				minutes = minutes.toString().padStart(2, '0');
+				return `${hours}:${minutes}`;
+			},
+			/**
+			 * 监听是否为全屏，默认控制器是否显示
+			 */
+			fullscreenchange(e) {
+				if (e.detail.fullScreen) {
+					this.controls = true
+				} else {
+					this.controls = false
+				}
+			},
+			/**
+			 * 监听是否播放
+			 */
+			playChange() {
+				this.isPlay = true
+				this.isEnd = false
+				this.sliderAble = false
+			},
+			/**
+			 * 监听是否暂停
+			 */
+			pauseChange() {
+				this.isPlay = false
+				this.sliderAble = true
+			},
+			/**
+			 * 是否播放完毕
+			 */
+			ended(e) {
+				this.isEnd = true
+				this.isPlay = false
+				this.value = 0
+				this.videoContext.seek(0);
+				this.videoContext.pause();
+			},
+			/**
+			 * 滑块滑动期间
+			 */
+			sliderDown(e) {
+				this.isSliderIng = true
+				const t = e.detail.value / 100
+				this.videoContext.seek(t * this.videoDuration);
+				this.nowPlayTime = t * this.videoDuration
+			},
+		}
+	}
+</script>
+
+
+<style>
+	.container {
+	 
+ 
+		position: absolute;
+	}
+
+	.videoTitle {
+		width: 100%;
+		height: 200rpx;
+		position: absolute;
+		top: 10rpx;
+		left: 20rpx;
+		font-size: 25rpx;
+		color: white;
+		z-index: 1;
+	}
+
+	.play-img {
+		width: 114rpx;
+		height: 114rpx;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -62%);
+		z-index: 2;
+	}
+
+	.video-view {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.videoControlsContainer {
+		position: fixed;
+		left: 50%;
+		bottom: 60rpx;
+		transform: translateX(-50%);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 704rpx;
+		height: 88rpx;
+		border-radius: 20rpx;
+		/* background: rgba(255, 255, 255, 0.5); */
+		/* backdrop-filter: blur(20rpx); */
+		padding: 0 31rpx;
+		box-sizing: border-box;
+	}
+
+	.play-icon {
+		padding-top: 4rpx;
+		width: 57rpx;
+		height: 57rpx;
+	}
+
+	.pause-icon {
+		padding-top: 4rpx;
+		width: 57rpx;
+		height: 57rpx;
+	}
+
+	.custdownTime {
+		font-size: 22rpx;
+		font-weight: normal;
+		color: white;
+	}
+
+	.slideBox {
+		width: 481rpx;
+	}
+</style>

pages/video/video.vue

+<style>
+	.nvideo_Page {
+		width: 100%;
+		height: 100%;
+
+	}
+</style>
+<template>
+	<view class="nvideo_Page">
+		<view>
+			<playerVideo :videoUrl="videoUrl" :videoName="videoName" :videoCoverImg="videoCoverImg" :vWidth="vWidth" :vHeight="vHeight"></playerVideo>
+		</view>
+	</view>
+</template>
+<script>
+	import playerVideo from "./components/player-video.vue"; //离线订单弹窗
+	export default {
+		data() {
+			return {
+
+				videoName: "", //视频名称
+				videoUrl: "", //视频地址
+				videoCoverImg: "", //封面图
+				vid: "", //视频Id
+				vWidth: "", //视频宽
+				vHeight: "", //视频高
+			}
+		},
+		components: {
+			playerVideo
+		},
+		onReady() {
+
+		},
+		onLoad(option) {
+			console.log("option", option);
+			if (option && option.vid) {
+				this.vid = option.vid;
+				this.getVideoInfo();
+			}
+			wx.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"],
+			});
+		},
+		methods: {
+			getVideoInfo() {
+				this.videoUrl = "";
+				this.videoCoverImg = "";
+				this.videoName = "";
+				this.vWidth = "";
+				this.vHeight = "";
+				var postMsg = {
+					vid: this.vid
+				};
+				this.apipost(
+					"Video_get_GetLXYVideoInfo",
+					postMsg,
+					res => {
+						if (res.resultCode == 1) {
+							var tempData = res.data;
+							this.videoUrl = tempData.VideoAddress;
+							this.videoCoverImg = tempData.Cover;
+							this.videoName = tempData.Name;
+							if (tempData && tempData.VideoWH && tempData.VideoWH != '') {
+								var tempArray = tempData.VideoWH.split(',')
+								if (tempArray && tempArray.length == 2) {
+									this.vWidth = tempArray[0];
+									this.vHeight = tempArray[1];
+								}
+							}
+						}
+						uni.hideLoading();
+					},
+					err => {
+						this.loading = false
+					}
+				);
+			},
+			//回到首页
+			goHome() {
+				uni.redirectTo({
+					url: "/pages/index/index"
+				});
+			},
+		},
+		mounted() {},
+		created() {
+			uni.setNavigationBarTitle({
+				title: "视频分享"
+			})
+		},
+	}
+</script>

plugin/api.js

@@ -23,10 +23,11 @@ export default {
 	install(Vue, options) {
 		Vue.prototype.host = "https://wx.weibaoge.cn/web/index.php?_mall_id=1285"
 
-		Vue.prototype.host2 = "http://192.168.10.226:5004"
-	    Vue.prototype.host3 = "http://192.168.10.226"
+		Vue.prototype.host2 = "http://192.168.5.46:5004"
+	    Vue.prototype.host3 = "http://192.168.5.46"
 		Vue.prototype.host2 = "https://erpmallapi.oytour.com"
 		Vue.prototype.host3 = "https://reborn.oytour.com"
+		 
 
 		Vue.prototype.request = function(param, success, failed) {
 			//网络请求