<template>
<view class="live">
<!-- 头部组件 -->
<heads :title="title" :border="true" :ishead_w="3" :bgImg="'rgba(0, 0, 0, 0)'"></heads>
<!-- 视频详情 -->
<view class="content">
<view class="content_item">
<view class="item_video">
<video
id="myVideo"
:src="src"
:objectFit="objectFit"
:controls="controls"
:autoplay="autoplay"
:loop="loop"
@play="isPlay"
@pause="isPause"
@timeupdate='videoUpdate'
@ended="videoEnded"
@loadedmetadata="loadedmetadata"
@fullscreenchange="fullscreenchange">
<!-- 自定义控制条 全屏状态下不显示 -->
<view class='process-container' v-if="!isAllSee">
<!-- 播放/暂停 -->
<view class="video-controls-play" :class="{new_bg:isShowIcon}" @tap.stop="videoOpreation">
<image :class="{new_stop:!isShowIcon}" :src="videoIsPaly ? shouc : wshouc" class='video-controls-icon'/>
</view>
<!-- 全屏播放按钮 -->
<view class="allSee" :style="{marginTop:allSeeTop}" v-if="isShowAll" @tap.stop="videoAllscreen">
<image class='allSee_icon' :src="videoIsPalyAll ? shouc : wshouc"></image>
<span>全屏观看</span>
</view>
<!-- 用户/视频详情 -->
<view class="videoDetails">
<view class="userInfor">
<view><image src="https://oss.houjiemeishi.com/laikeds/1/1/20230801/1686295111082360832.png" mode="widthFix"></image></view>
<view>@瘦仔</view>
<view>关注</view>
</view>
<view class="videoInfor">
<view>仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。</view>
<view @tap="isZk = true">展开</view>
</view>
</view>
<!-- 展开详情 -->
<view class="videoInfor_ZK_bg" v-if="isZk" @tap="isZk = !isZk"></view>
<view class="videoInfor_ZK" :class="{videoInfor_ZK_GD:isZk}" v-if="isZk">
<view class="videoInfor_ZK_goods">
<view>
<image src="https://oss.houjiemeishi.com/laikeds/1/1/20230801/1686295111082360832.png" mode="widthFix"></image>
</view>
<view class="videoInfor_ZK_goods_text">
<view>
<span>六味地黄丸 浓缩丸补肾 200s*1/盒</span>
<image src="https://java.houjiemeishi.com/pic/images/icon1/bg_white.png" mode="widthFix"></image>
</view>
<view>
<span>¥118.00</span><span>¥118.00</span>
</view>
</view>
<view @tap="isZk = !isZk">
<image src="https://java.houjiemeishi.com/pic/images/icon1/guanbi2x.png" mode="widthFix"></image>
</view>
</view>
<view class="videoInfor_ZK_text">
<view>仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。</view>
<view>仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。 仲景六味地黄丸,药材好,药才好,用尽中文韵味。仲景六味地黄丸,药材好,药才好,用尽中文韵味。</view>
<view>09-10 2023</view>
</view>
</view>
<!-- 播放时间 -->
<!-- <view class="currtime">{{currtime}} / {{druationTime}}</view> -->
<!-- 控制条+滑块 -->
<view class='slider-container'>
<slider
class="isSlider"
step="1"
backgroundColor="#9f9587"
activeColor="#d6d2cc"
block-color="#FFFFFF"
block-size="12"
min="0"
:max="videoTime"
:value="sliderValue"
@change="sliderChange"
@changing="sliderChanging"/>
</view>
<!-- 商品信息+收藏 -->
<view class="goods">
<view class="goodsInfor">
<view>
<image src="https://oss.houjiemeishi.com/laikeds/1/1/20230801/1686295111082360832.png" mode="widthFix"></image>
</view>
<view>
<view>我是商品的名称我是商品的名称我是称我是商品的名称我是称我是商品的名称我是</view>
<view>¥69.00</view>
</view>
</view>
<view class="goodsSc">
<image :src="shouc" mode="widthFix"></image>
<span>4699</span>
</view>
</view>
</view>
</video>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
title: ' ',//标题
videoContext: undefined,//video上下文
viedeoWidth: '',//视频宽度
viedeoHeight: '',//视频高度
videoTime: '',//视频总时长
sliderValue: 0, //控制进度条slider的值，
currtime:'00:00',//当前播放时间 -计算后
druationTime:'00:00',//总时间 -计算后
objectFit: 'contain', //视频与容器大显示模式 包含contain 填充fill 覆盖cover
controls: false, //是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
loop: false,//是否循环播放
autoplay: true,//是否自动播放
isShowIcon: false, //播放图标状态 false不显示图标 true显示图标
videoIsPaly: false,//播放状态 false播放 true暂停
videoIsPalyAll: false,//是否全屏播放
allSeeTop: '',//和视频的距离
isAllSee: false,//是否进入来全屏模式
isShowAll: false,//是否显示全屏按钮
isZk: false,//展开详情
//收藏
shouc: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL + 'images/icon/goodsDetailed_ysc.png',
wshouc: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL + 'images/icon/goodsDetailed_sc.png',
//视频数据
src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4',
}
},
onLoad(){
//后浪，请看这里：整个页面只适用小程序，H5不能用。H5得用另外一种方法。
//获取video上下文
this.videoContext = uni.createVideoContext('myVideo', this)
},
onShow(){
console.log("onShow");
},
onHide() {
console.log('页面隐藏了');
},
onUnload() {
console.log('页面关闭了');
},
onPullDownRefresh() {
console.log("触发下拉刷新");
},
onReachBottom() {
console.log("触发上拉加载");
},
mounted() {},
methods: {
//点击开始-暂停播放
videoOpreation() {
this.videoIsPaly ? this.contrPlay() : this.pause();
},
//点击继续播放执行play事件，并修改图标
contrPlay(){
console.log('点击：继续播放--->');
this.videoContext.play();
this.videoIsPaly = false;
},
//点击暂停播放执行pause事件，并修改图标
pause() {
console.log('点击：暂停播放--->');
this.videoContext.pause();
this.videoIsPaly = true;
},
//点击进入全屏
videoAllscreen() {
console.log('点击：进入全屏--->');
this.videoIsPalyAll ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
},
//视频加载完成 时触发 （获取video元数据）
loadedmetadata(event){
console.log('监听：video元数据-->',event);
let viedeoWidth = event.detail.width //视频宽度
this.viedeoWidth = viedeoWidth
let viedeoHeight = event.detail.height //视频高度
this.viedeoHeight = viedeoHeight
let videoTime = event.detail.duration //视频总时间
this.videoTime = videoTime
//获取当前屏幕宽度
let windowWidth = uni.getStorageSync('windowWidth');
//如果视频宽高比>1才显示全屏按钮
if(viedeoWidth/viedeoHeight > 1){
this.isShowAll = true
} else {
this.isShowAll = false
}
//计算 全屏按钮 显示位置
this.allSeeTop = (viedeoHeight*windowWidth/viedeoWidth)/2 + 30 + 'px'
},
//播放状态 时触发
isPlay(event){
console.log('监听：进入播放状态--->', event);
//开始播放状态，会在1秒后隐藏暂停播放图标（css）
this.isShowIcon = false
},
//暂停状态 时触发
isPause(event){
console.log('监听：进入暂停状态--->', event);
//暂停播放状态 ，会显示开始播放图标
this.isShowIcon = true
},
//当视频进入和退出全屏 时触发
fullscreenchange(event){
if(event.detail.fullScreen == true){
console.log('监听：进入全屏模式--->');
this.videoIsPalyAll = true
//是否进入来全屏模式
this.isAllSee = true
//显示默认播放控件
this.controls = true
} else {
console.log('监听：退出全屏模式--->');
this.videoIsPalyAll = false
//是否进入来全屏模式
this.isAllSee = false
//显示自定义播放控件
this.controls = false
}
},
//播放进度变化 时触发 （触发频率 250ms 一次）
videoUpdate(event) {
//进度条 绑定视频播放进度
let duration = this.videoTime
let sliderValue = event.detail.currentTime / duration * 100
let second = sliderValue / 100 * duration;
this.sliderValue = second
//视频总时长
this.druationTime = this.formatSeconds(duration)
//视频当前播放时长
this.currtime = this.formatSeconds(second)
},
//播放完 时触发 （跳转到视频开始，这里要禁止循环播放）
videoEnded(event) {
console.log('监听：视频结束--->', event);
this.videoIsPaly = true //显示暂停图标
this.isShowIcon = true //不一秒后隐藏图标
this.sliderValue = 0 //进度条跳到最开始位置
this.videoContext.seek(0); //视频跳到最开始位置
},
//在拖拽 时触发
sliderChanging(event) {
console.log('监听：拖拽中--->', event.detail.value);
},
//拖拽完成 时触发
sliderChange(event) {
console.log('监听：拖拽完成--->', event.detail.value);
this.sliderValue = event.detail.value,
//跳到视频指定位置
this.videoContext.seek(event.detail.value);
},
//时间格式 秒 -》时:分:秒
formatSeconds(a) {
let hh = parseInt(a/3600);
let mm = parseInt((a-hh*3600)/60);
if(mm < 10) mm = "0" + mm;
let ss = parseInt((a-hh*3600)%60);
if(ss < 10) ss = "0" + ss;
if(hh < 10) hh = hh == 0?'':`0${hh}:`;
let length = hh + mm + ":" + ss;
if(a >= 0){
return length;
} else {
return "00:00";
}
},
},
};
</script>
<style>
page{
background-color: #f4f5f6;
}
</style>
<style lang="less" scoped>
//淡出 隐藏
@keyframes anHideToast4 {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
//上滑 显示
@keyframes anShowToast3 {
0% {
margin-bottom: -100%;
}
100% {
margin-bottom: 0;
}
}
//解决图片拉伸闪的一下（没有设置默认高度）
image{
width: auto;
height: auto;
}
.live{
width: 100vw;
height: 100vh;
overflow: hidden;
.content{
width: auto;
padding: auto;
box-sizing: border-box;
position: absolute;
top: 0;
.content_item{
width: auto;
height: auto;
.item_video{
display: flex;
flex-direction: column;
background-color: #ffffff;
position: relative;
>video{
width: 100vw;
height: 100vh;
}
.process-container{
width: 100%;
height: 300rpx;
position:absolute;
bottom: 0;
left:0;
right:0;
z-index:13;
display:flex;
align-items: center;
.video-controls-play{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
.new_stop{
animation: anHideToast4 2s both;
}
>image{
display:inline-block;
width:50rpx;
height:50rpx;
text-align:center;
}
}
.new_bg{
background-color: rgba(255, 255, 255, .2);
}
.currtime{
position: absolute;
left: 0;
right: 0;
bottom: 168rpx;
z-index: 18;
color: #ffffff;
font-size: 22rpx;
line-height: 60rpx;
text-align: center;
}
.videoDetails{
width: 100%;
height: auto;
position: absolute;
left: 0;
bottom: 168rpx;
z-index: 18;
padding: 36rpx 36rpx 50rpx 36rpx;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.userInfor{
width: 100%;
display: flex;
align-items: center;
>view:nth-child(1){
width: 72rpx;
height: 72rpx;
background: #C5C5C5;
border-radius: 50rpx;
border: 2rpx solid #FFFFFF;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
>image{
width: 72rpx;
}
}
>view:nth-child(2){
font-size: 32rpx;
color: #FFFFFF;
line-height: 44rpx;
margin: 0 20rpx;
}
>view:nth-child(3){
background: #FA5151;
border-radius: 22rpx;
padding: 4rpx 16rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #FFFFFF;
line-height: 40rpx;
}
}
.videoInfor{
width: 100%;
display: flex;
align-items: center;
margin-top: 16rpx;
>view:first-child{
font-size: 24rpx;
color: #FFFFFF;
line-height: 44rpx;
width: 632rpx;
height: auto;
display:-webkit-inline-box;
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis;/*隐藏后添加省略号*/
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //想显示多少行
}
>view:last-child{
position: absolute;
right: 36rpx;
bottom: 50rpx;
font-size: 24rpx;
color: rgba(255,255,255,0.7);
line-height: 44rpx;
}
}
}
.videoInfor_ZK_bg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
z-index: 29;
}
.videoInfor_ZK_GD{
animation: anShowToast3 0.5s both;
}
.videoInfor_ZK{
position: fixed;
bottom: 0;
z-index: 30;
width: 100%;
height: 700rpx;
background-color: #FFFFFF;
border-radius: 24rpx 24rpx 0 0;
padding-bottom: 60rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.videoInfor_ZK_goods{
width: 100%;
height: auto;
padding: 32rpx 32rpx 26rpx 32rpx;
box-sizing: border-box;
border-bottom: 2rpx solid #E6E6E6;
display: flex;
justify-content: space-between;
>view:nth-child(1){
width: 96rpx;
height: 96rpx;
overflow: hidden;
margin-right: 24rpx;
>image{
width: 100%;
}
}
.videoInfor_ZK_goods_text{
flex: 1;
height: auto;
>view:nth-child(1){
display: flex;
align-items: center;
>span{
font-size: 24rpx;
color: #26589A;
line-height: 44rpx;
}
>image{
width: 8rpx;
height: 20rpx;
margin-left: 20rpx;
}
}
>view:nth-child(2){
display: flex;
align-items: center;
margin-top: 18rpx;
>span:nth-child(1){
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #FA5151;
line-height: 44rpx;
}
>span:nth-child(2){
font-size: 24rpx;
color: #999999;
line-height: 44rpx;
margin-left: 8rpx }
}
}
>view:nth-child(3){
width: 24rpx;
height: 24rpx;
margin-left: 24rpx;
>image{
width: 100%;
}
}
}
.videoInfor_ZK_text{
width: 100%;
height: 468rpx;
padding: 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: auto;
>view:nth-child(1){
font-size: 24rpx;
font-weight: 500;
color: #333333;
line-height: 44rpx;
}
>view:nth-child(2){
font-size: 24rpx;
color: #666666;
line-height: 44rpx;
margin-top: 16rpx;
}
>view:nth-child(3){
font-size: 24rpx;
color: #999999;
line-height: 44rpx;
margin-top: 32rpx;
}
}
}
.slider-container{
width: 100%;
height: 50rpx;
z-index: 19;
position: absolute;
left: 0;
bottom: 150rpx;
.isSlider{
margin-top: 0 !important;
}
}
.goods{
width: 100%;
height: auto;
padding: 20rpx 36rpx;
padding-bottom: 50rpx;
box-sizing: border-box;
background-color: black;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
z-index: 20;
.goodsInfor{
width: 538rpx;
height: auto;
padding: 16rpx 24rpx;
box-sizing: border-box;
background: rgba(255,255,255,0.24);
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
>view:first-child{
display: flex;
align-items: center;
justify-content: center;
border-right: 2rpx solid #707070;
>image{
width: 48rpx;
border-radius: 8rpx;
overflow: hidden;
margin-right: 16rpx;
}
}
>view:last-child{
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 16rpx;
>view{
line-height: 34rpx;
font-size: 24rpx;
color: #FFFFFF;
}
>view:first-child{
width: 400rpx;
height: auto;
display:-webkit-inline-box;
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis;/*隐藏后添加省略号*/
-webkit-box-orient:vertical;
-webkit-line-clamp:1; //想显示多少行
}
}
}
.goodsSc{
display: flex;
align-items: center;
justify-content: center;
>image{
width: 48rpx;
margin-right: 16rpx;
}
>span{
font-size: 24rpx;
color: #FFFFFF;
}
}
}
.allSee{
padding: 10rpx 20rpx;
box-sizing: border-box;
border-radius: 100rpx;
background-color: rgba(255, 255, 255, .4);
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,0);
display: flex;
align-items: center;
justify-content: center;
.allSee_icon{
display:inline-block;
width:30rpx;
height:30rpx;
text-align:center;
}
>span{
color: #ffffff;
margin-left: 10rpx;
font-size: 24rpx;
}
}
}
}
}
}
}
</style>
因篇幅问题不能全部显示，请点此查看更多更全内容