edit

lib/dever/components/speaker.vue

@@ -1,4 +1,4 @@
-<template name="speaker">
+<template name="dever-speaker">
 	<view class="grace-swiper-msg">
 		<view class="grace-swiper-msg-icon" :class="[iconClass]" :style="{color:iconColor}"></view>
 		<swiper :display-multiple-items="display" :vertical="vertical" autoplay="true" circular="true" :interval="interval" :style="{height:height}">
@@ -16,7 +16,7 @@
 </template>
 <script>
 export default {
-	name: "speaker",
+	name: "dever-speaker",
 	props: {
 		msgs : {
 		  type  : Array,

lib/dever/components/video.nvue

@@ -0,0 +1,263 @@
+<template name="dever-video">
+	<view>
+		<view class="player">
+			<video
+				:src="src"
+				preload
+				autoplay
+				:muted="!play"
+				:show-play-btn="true"
+				:show-center-play-btn="false"
+				:controls="false"
+				:loop="true"
+				:id="id()"
+				objectFit="fill"
+				:enable-progress-gesture="false"
+				play-btn-position="center"
+				class="video"
+				:playsinline="true"
+				:webkit-playsinline="true"
+				x-webkit-airplay="allow"
+				x5-video-player-type="h5-page"
+				>
+			</video>
+		</view>
+		<view class="control" @click="open">
+			<cover-image v-if="poster" class="poster" :src="pic">
+			</cover-image>
+			
+			<cover-image
+			class="ico-video-play" v-if="!play"></cover-image>
+			
+			<pos :item="item" :down="src" v-if="item"></pos>
+			
+			<cover-view class="cover-view-right" v-if="showInfo">
+				<cover-image :src="item[0].pic"
+				 class="avater img" 
+				 @click.stop="tapAvater"></cover-image>
+				
+				<text class="right-follow">+</text>
+				<cover-image 
+				style="position:relative;top:-20upx;"
+				:src="up ? '../../static/video/axc.png' : '../../static/video/bed.png'" 
+				class="img-left" @click.stop="tapLove"></cover-image>
+				
+				<text class="right-text">1</text>
+				<cover-image src="@/static/video/ay2.png" 
+				style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image>
+				
+				<text class="right-text">10</text>
+				<cover-image src="@/static/video/b6p.png" 
+				style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image>
+				
+				<text class="right-text">10</text>
+				<cover-image src="@/static/video/changpian.png" class="musicIcon img">
+				</cover-image>
+			
+			</cover-view>
+		</view>
+	</view>
+</template>
+
+<script>
+import pos from "@/pages/dream/view/pos.vue";
+export default {
+	name: "dever-video",
+	props: {
+		item : {
+			type    : Object,
+			value	: null
+		},
+		src : {
+			type    : String,
+			value	: null
+		},
+		index : {
+			type    : Number,
+			value	: null
+		},
+		vid : {
+			type    : String,
+			value	: null
+		},
+		pic : {
+			type    : String,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			play : false,
+			poster : true,
+			video : false,
+			showInfo : false,
+		};
+	},
+	mounted() {
+		this.video = uni.createVideoContext(this.id(), this);
+	},
+	methods:{
+		//获取video_id
+		id : function()  {
+			return 'video_' + this.vid + '_' + this.index;
+		},
+		start : function()  {
+			this.poster = false;
+			this.video.play();
+			this.play = true;
+		},
+		stop : function() {
+			this.video.pause();
+			this.play = false;
+		},
+		open : function()  {
+			if (!this.play) {
+				this.start();
+			} else {
+				this.stop();
+			}
+		},
+	},
+	components:{
+		pos
+	}
+}
+</script>
+<style scoped>
+.control {
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	background: transparent;
+	position: absolute;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+}
+.player {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	z-index: 1;
+	background: transparent;
+	position: absolute;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+}
+.video {
+	width: 101%;
+	height: 101%;
+	margin-left: -5rpx;
+	margin-top: -5rpx;
+	position: relative;
+	background-color: transparent;
+	z-index: 1;
+}
+.poster{
+	background-size: cover;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+.ico-video-play{
+  background: url(@/static/icon/ico-video-play.png) no-repeat;
+  background-size: cover;
+  width: 100rpx;
+  height: 100rpx;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%,-50%,0);
+}
+.cover-view-left {
+	position: absolute;
+	margin-left: 20upx;
+	width: 580upx;
+	bottom: 110upx;
+	z-index: 9999;
+	font-size: 14px;
+	color: #ffffff;
+}
+.left-text {
+	font-size: 14px;
+	color: #ffffff;
+}
+
+.cover-view-right {
+	position: absolute;
+	bottom: 40px;
+	right: 30upx;
+	z-index: 9999;
+	text-align: center;
+}
+
+.avater {
+	border-radius: 50%;
+	border-width: 2px;
+	border-style: solid;
+	border-color: #ffffff;
+}
+
+.img {
+	height: 90upx;
+	width: 90upx;
+	margin-bottom: 110upx;
+}
+
+.img-left {
+	width: 80upx;
+	height: 66upx;
+	padding-left: 4px;
+}
+.right-follow {
+	position: absolute;
+	z-index: 100;
+	top: 75upx;
+	left: 28upx;
+	color: #ffffff;
+	font-size: 16px;
+	width: 34upx;
+	height: 34upx;
+	background-color: #f12f5b;
+	text-align: center;
+	line-height: 34upx;
+	border-radius: 17upx;
+}
+
+.right-text {
+	color: #ffffff;
+	font-size: 11px;
+	text-align: center;
+	margin-bottom: 40upx;
+}
+.musicIcon {
+	margin-top: 40upx;
+}
+@keyframes rotating {
+	from {
+		transform: rotate(0);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+.view-left-text-content {
+	flex: 1;
+}
+.view-left-text {
+	color: #ffffff;
+	font-size: 18px;
+	margin-bottom: 10upx;
+	font-weight: bold;
+}
+.text-content-text {
+	color: #ffffff;
+	font-size: 16px;
+	line-height: 50upx;
+	height: 100upx;
+	overflow: hidden;
+}
+</style>

lib/dever/config.js

@@ -8,6 +8,7 @@ const request = {
 	//	服务器接口地址
 
 	host: "http://192.168.2.70/dreamland/",
+	host: "http://192.168.3.66/dreamland/",
 	
 	//	请求的参数	
 	data: {},

pages/dream/view/video_demo.vue

@@ -0,0 +1,32 @@
+<template>
+	<video
+		:src="v.video"
+		preload
+		:show-play-btn="true"
+		:show-center-play-btn="false"
+		:controls="false"
+		:loop="true"
+		:id="id(k)"
+		objectFit="fill"
+		:enable-progress-gesture="false"
+		@click="start"
+		ref="video_url"
+		play-btn-position="center"
+		class="video"
+		:playsinline="true"
+		:webkit-playsinline="true"
+		x-webkit-airplay="allow"
+		:x5-playsinline="false"
+		:x5-video-player-fullscreen="true"
+		:x5-video-can-play-with-audio="true"
+		x5-video-orientation="portraint"
+		x5-video-player-type="h5-page"
+		>
+	</video>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/dream/view/vodShort.vue

@@ -1,80 +1,25 @@
 <template name="vodShort">
 	<view>
 		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVod">
-			<swiper-item v-for="(v, k) in item">
-		
-				<video
-					:src="v.video"
-					preload
-					:show-play-btn="true"
-					:show-center-play-btn="false"
-					:controls="false"
-					:loop="true"
-					:id="id(k)"
-					objectFit="fill"
-					:enable-progress-gesture="false"
-					@click="start"
-					ref="video_url"
-					play-btn-position="center"
-					class="video"
-					:x5-playsinline="true"
-					:playsinline="true"
-					:webkit-playsinline="true"
-					:x5-video-can-play-with-audio="true"
-					x5-video-orientation="portraint"
-					x-webkit-airplay="allow"
-					
-					>
-				</video>
-				
-				<cover-image v-if="show_play_poster" class="poster" :src="v.pic">
-				</cover-image>
-				
-				<cover-image
-				class="ico-video-play" v-if="show_play" 
-				@tap="start"></cover-image>
+			<swiper-item v-for="(v, k) in item">
 				
-				<pos :item="v" :down="v.video"></pos>
+				<dever-video
+				:item="v"
+				:src="v.video" 
+				:pic="v.pic" 
+				:index="k" 
+				:vid="v.id" 
+				ref="video"
+				>
+				</dever-video>
 				
-				<cover-view class="cover-view-right" v-if="showInfo">
-					<cover-image :src="item[0].pic"
-					 class="avater img" 
-					 @click.stop="tapAvater"></cover-image>
-					
-					<text class="right-follow">+</text>
-					<cover-image 
-					style="position:relative;top:-20upx;"
-					:src="up ? '../../static/video/axc.png' : '../../static/video/bed.png'" 
-					class="img-left" @click.stop="tapLove"></cover-image>
-					
-					<text class="right-text">1</text>
-					<cover-image src="@/static/video/ay2.png" 
-					style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image>
-					
-					<text class="right-text">10</text>
-					<cover-image src="@/static/video/b6p.png" 
-					style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image>
-					
-					<text class="right-text">10</text>
-					<cover-image src="@/static/video/changpian.png" class="musicIcon img">
-					</cover-image>
-					
-					<cover-view class="progressBar" :animation="animationData" ></cover-view>
-					
-					
-				</cover-view>
-		
-		
-		
-		
-		
 			</swiper-item>
 		</swiper>
 	</view>
 </template>
 
-<script>
-import pos from "@/pages/dream/view/pos.vue";
+<script>
+import deverVideo from '@/lib/dever/components/video.nvue';
 var play = true;
 export default {
 	name: "vodShort",
@@ -90,86 +35,30 @@ export default {
 	},
 	data() {
 		return {
-			page : 0,
-			up: false,
-			time: 0,
-			barWidth:0,
-			animationData: {},
-			times:null,
-			show_play:true,
-			show_play_poster:true,
-			muted: true,
 			current_index: 0,
-			showInfo: false,
 		};
 	},
 	created() {
-		/*
-		进入页面自动播放，已取消
-		setTimeout(()=>{
-			play = true;
-			this.start();
-		},1000)
-		*/
+		
+	},
+	mounted() {
+		this.config.stop[this.config.page] = this;
 	},
-	methods:{
-		//获取video_id
-		id : function(index)  {
-			var video_id = this.item[index].id;
-			return 'video_short_' + video_id;
-		},
-		update : function(event)  {
-			let t_w = parseInt(this.width);
-			this.duration = event.detail.duration;
-			this.time = event.detail.currentTime;
-			let width = (this.time / this.duration) * t_w;
-			let w = 0;
-		},
-		start : function()  {
-			this.config.stop[this.config.page] = this;
-			this.handle(play);
-		},
-		stop : function()  {
-			this.handle(false);
-		},
-		handle : function(state)  {
-			this.show_play_poster = false;
-			var id = this.id(this.current_index);
-			if (state) {
-				this.videoCtx = uni.createVideoContext(id, this);
-				this.videoCtx.play();
-				this.muted = false;
-				this.show_play = false;
-				play = false;
-				//console.info('播放', id, this.current_index);
-			} else if(!play) {
-				this.videoCtx = uni.createVideoContext(id, this);
-				this.videoCtx.pause();
-				this.muted = true;
-				this.show_play = true;
-				play = true;
-				//console.info('暂停', id, this.current_index);
-			}
+	methods:{
+		start : function() {
+			this.$refs.video[this.current_index].start();
+		},
+		stop : function() {
+			this.$refs.video[this.current_index].stop();
 		},
-		changeVod : function(e)  {
-			// 暂停之前的视频
-			this.stop();
-			this.current_index = e.detail.current;
-			// 播放现在的视频
-			this.start();
-			
-			// 判断是否第一条
-			if (e.detail.current == 0) {
-				//console.log('到顶了');
-				return false;
-			}
-			
-			// 判断是否最后一条
-			if (e.detail.current == this.item.length-1) {
-				//console.log('到底了');
-				return false;
-			}
-			
+		changeVod : function(e)  {
+			var self = this;
+			self.$nextTick(()=>{
+				self.stop();
+				self.current_index = e.detail.current;
+				self.start();
+			});
+					
 		},
 		tapMsg : function(e)  {
 			console.log(5, e);
@@ -183,13 +72,9 @@ export default {
 			console.log(7, e);
 		}
 	},
-	watch: {
-		play : function(newVal, oldVal) {
-			this.start();
-		}
-	},
+
 	components:{
-		pos
+		deverVideo
 	}
 }
 </script>
@@ -202,132 +87,6 @@ export default {
 	position: relative;
 	top: 0;
 	left: 0;
-}
-.video {
-	width: 100%;
-	height: 100%;
-	position: relative;
-}
-.play{
-	position: absolute;
-	width: 20vw;
-	height: 20vw;
-	left: 40vw;
-	top: 40vh;
-	opacity: 0.5;
-}
-.poster{
-	background-size: cover;
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-}
-.progressBar {
-	border-radius: 2upx;
-	height: 4upx;
-	background-color: #FF4500;
-	z-index: 999999;
-	position: absolute;
-	bottom: 68rpx;
-}
-.ico-video-play{
-  background: url(@/static/icon/ico-video-play.png) no-repeat;
-  background-size: cover;
-  width: 100rpx;
-  height: 100rpx;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate3d(-50%,-50%,0);
-}
-.cover-view-left {
-	position: absolute;
-	margin-left: 20upx;
-	width: 580upx;
-	bottom: 110upx;
-	z-index: 9999;
-	font-size: 14px;
-	color: #ffffff;
-}
-.left-text {
-	font-size: 14px;
-	color: #ffffff;
-}
-
-.cover-view-right {
-	position: absolute;
-	bottom: 40px;
-	right: 30upx;
-	z-index: 9999;
-	text-align: center;
-}
-
-.avater {
-	border-radius: 50%;
-	border-width: 2px;
-	border-style: solid;
-	border-color: #ffffff;
-}
-
-.img {
-	height: 90upx;
-	width: 90upx;
-	margin-bottom: 110upx;
-}
-
-.img-left {
-	width: 80upx;
-	height: 66upx;
-	padding-left: 4px;
-}
-.right-follow {
-	position: absolute;
-	z-index: 100;
-	top: 75upx;
-	left: 28upx;
-	color: #ffffff;
-	font-size: 16px;
-	width: 34upx;
-	height: 34upx;
-	background-color: #f12f5b;
-	text-align: center;
-	line-height: 34upx;
-	border-radius: 17upx;
-}
-
-.right-text {
-	color: #ffffff;
-	font-size: 11px;
-	text-align: center;
-	margin-bottom: 40upx;
-}
-.musicIcon {
-	margin-top: 40upx;
-}
-@keyframes rotating {
-	from {
-		transform: rotate(0);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-.view-left-text-content {
-	flex: 1;
-}
-.view-left-text {
-	color: #ffffff;
-	font-size: 18px;
-	margin-bottom: 10upx;
-	font-weight: bold;
-}
-.text-content-text {
-	color: #ffffff;
-	font-size: 16px;
-	line-height: 50upx;
-	height: 100upx;
-	overflow: hidden;
 }
+
 </style>