dreamland/pages/dream/view/vodComment.vue

<template name="vodComment">
	<view>
		<view class="topbanner">
			<video
				:src="item.video"
				preload="auto"
				:show-play-btn="true"
				:show-center-play-btn="false"
				:controls="true"
				:loop="true"
				:id="id()"
				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"
				>
			</video>
			
			<cover-image v-if="show_play_poster" class="poster" :src="item.pic">
			</cover-image>
			
			<cover-image
			class="ico-video-play" v-if="show_play" 
			@tap="start"></cover-image>
			
		</view>
		<view class='msgs-tabs'>
		  <view class='tit'>{{item.name}}</view>
		  <view class='num'>全部评论（100）</view>
		</view>
		<view class="living">
		  <scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
			<view class="item" v-for="(v, k) in comments">
			  <view class="user">
				<image :src="v.avatar"></image>
			  </view>
			  <view class="info clearfix">
				<view class="username text-ellipsis">
				  <text>{{v.username}}</text>
				</view>
				<view class="txt">
				  <text>{{v.content}}</text>
				</view>
			  </view>
			</view>
		  </scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vodComment",
	props: {
		config : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
	},
	data() {
		return {
			show_play_poster: true,
			show_play: true,
			videoCtx : false,
			comments: [
				{
					id : 1,
					avatar : 'https://yt3.ggpht.com/a/AATXAJxSSAfjWzxQAkDei2MeIPc6WqlO2FG-gOSpZQ=s48-c-k-c0xffffffff-no-rj-mo',
					username : 'rabin',
					content : 'dfdfdfdf',
				},
				{
					id : 2,
					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
					username : 'test',
					content : '哈哈哈哈或',
				}
			],
			loading: false
		}
	},
	methods:{
		id : function()  {
			var video_id = this.item.id;
			return 'video_comment_' + video_id;
		},
		start : function()  {
			this.show_play_poster = false;
			this.config.stop[this.config.page] = this;
			var id = this.id();
			if (!this.videoCtx) {
				this.videoCtx = uni.createVideoContext(id, this);
			}
			if (this.show_play) {
				this.videoCtx.play();
				this.show_play = false;
			} else {
				this.videoCtx.pause();
				this.show_play = true;
			}
		},
		stop : function()  {
			var id = this.id();
			if (!this.videoCtx) {
				this.videoCtx = uni.createVideoContext(id, this);
			}
			this.videoCtx.pause();
			this.show_play = true;
		},
	},
}
</script>

<style>
.topbanner{
  position: relative;
}
.topbanner image,.topbanner video,.topbanner live-player{
  width: 750rpx;
  height: 422rpx;
  display: block;
}
.topbanner .media-cover,.topbanner video,.topbanner live-player{
  height: 422rpx;
}
.living{
  margin-bottom:50rpx;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.living-tabs{
  display: flex;
  justify-content: center;
  margin-bottom: 36rpx;
}
.living-tabs>view{
  font-size: 30rpx;
  line-height: 52rpx;
  margin: 0 26rpx;
}
.living-tabs>view.cur{
  border-bottom: 6rpx solid #000;
}
.living .send{
  border-bottom: solid 2rpx #f0f0f0;
  padding:0 30rpx 40rpx;
}
.living .send input{
  float:left;
  box-sizing: border-box;
  width:540rpx;
  height:60rpx;
  border:solid 2rpx #999999;
  border-radius: 10rpx;
  padding:0 10rpx;
  line-height: 60rpx;
  font-size: 30rpx;
}
.living .send .button{
  float:right;
  box-sizing: border-box;
  padding:0;
  width:130rpx;
  min-width: 0;
  height:60rpx;
  line-height: 60rpx;
}
.living .message{
  height:320rpx;
  padding:15rpx 0 110rpx;
  border-bottom: solid 2rpx #f0f0f0;
}
.living .message .item{
  padding:20rpx 35rpx 0;
}
.living .message .user{
  float:left;
}
.living .message .user image{
  display: block;
  width:51rpx;
  height:51rpx;
  border-radius: 50%;
}
.living .message .info{
  position: relative;
  margin-left:70rpx;
  overflow: visible;
}
.living .message .username{
  font-size: 28rpx;
  margin-bottom: 13rpx;
}
.living .message .txt{
  position: relative;
  float:left;
  background: #eeeeee;
  max-width:400rpx;
  border-radius: 15rpx;
  padding: 9rpx 18rpx;
  font-size: 26rpx;
  line-height: 1.8;
  color: #666666;
  overflow: visible;
}
.living .message .txt:before{
  display: block;
  position: absolute;
  top:0;
  left:-14rpx;
  width:0;
  height:0;
  border: solid 14rpx transparent;
  border-top: solid 12rpx #eee;
  content:'';
}
.msgs-tabs{
  line-height: 88rpx;
  display: flex;
  height: 88rpx;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #ccc;
}
.msgs-tabs .tit{
  font-size: 30rpx;
  color: #000;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.msgs-tabs .tit:before{
  content: '';
  display: inline-block;
  width: 6rpx;
  height: 30rpx;
  margin-right: 10rpx;
  background-color: #000;
}
.msgs-tabs .num{
  font-size: 22rpx;
  color: #999;
  overflow: hidden;
}
.living{
  margin-bottom: 0;
}
.living .message{
  padding:0;
  border-bottom: 0;
}
.console{
  z-index: 5;
}
.living .message{
  position: absolute;
  bottom: 120rpx;
  top: 544rpx;
  left: 0;
  width: 100%;
  height: auto;
}
.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);
}

.console{
  position: fixed;
  bottom:0;
  left:0;
  width:750rpx;
  height:98rpx;
  padding-top:20rpx;
}
.console .comment{
  position: absolute;
  top:10rpx;
  left:85rpx;
  background:url(http://www.huoxingkandiqiu.com/files/img/ico-comment.png) no-repeat;
  background-size: 98rpx 98rpx;
  width:98rpx;
  height:98rpx;
}
.console .thumbup{
  position: absolute;
  top:10rpx;
  right:85rpx;
}
.console .num{
  background: #fff;
  position: absolute;
  top:40rpx;
  right:0;
  width:100rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #000;
  font-size: 24rpx;
  text-align: center;
}
.console .unlike{
  background:url(http://www.huoxingkandiqiu.com/files/img/ico-unlike.png) no-repeat;
  background-size: 98rpx 98rpx;
  width:98rpx;
  height:98rpx;
}
.console .like{
  background:url(http://www.huoxingkandiqiu.com/files/img/ico-like.png) no-repeat;
  background-size: 98rpx 98rpx;
  width:98rpx;
  height:98rpx;
}
.mask .layer{
  padding:40rpx 30rpx;
}
.mask textarea{
  margin-bottom: 25rpx;
  box-sizing: border-box;
  padding:10rpx;
  border:solid 2rpx #999999;
  border-radius: 10rpx;
  width:500rpx;
  font-size: 24rpx;
}
.mask .button{
  width:300rpx;
}
.share{
  position: fixed;
  bottom:20rpx;
  left:225rpx;
}

.console .edit{
  background:url(http://www.huoxingkandiqiu.com/files/img/edit.png) no-repeat;
  background-size: 80rpx 80rpx;
  width:80rpx;
  height:80rpx;
  position: absolute;
  left: 135rpx;
  bottom: 30rpx;
}
.console .edit.left30{
  left: 30rpx;
}
</style>