首先上面是一个视频播放器

 

把视频的宽度设置为100%即可铺满全屏

然后视频的标题和作者

最后就是一个视频播放列表 ，设置一个固定位置开始滚动即可

还有一个问题没有解决，大家出出主意。

 

 在播放页面在点击一个新的视频去播放，点进去的新视频获取不到自身的id,就导致后面的数据无法显示。

页面代码

<!--pages/video-info/video-info.wxml--><view><video src="{{mvUrl}}" autoplay="true" class="video" danmu-list="{{danmuLists}}"referrer-policy="origin"></video>
</view><scroll-view  class="content" scroll-y>
<view class="container"><image class="image" mode="widthFix" src="{{mvInfos.cover}}"></image><view class="text-container"><text class="text">{{mvInfos.name}}-{{mvInfos.artistName}}</text></view>
</view><view class="videoList"> <block wx:for="{{videoLists}}" wx:key="{{item.id}}"><video-item class="item" itemData="{{item}}" bindtap="onClickItem" data-item="{{itemData.id}}" />      </block></view>
</scroll-view >

// pages/video-info/video-info.js
import {getMvUrlInfo,getMvInfos,getMvRelate,getTopMv} from "../../services/request/myvideorequest"
Page({/*** 页面的初始数据*/data: {id : 0,videoid:0,mvUrl:"",mvInfos:{},mvRelate:{},videoLists:[],offset:0,hasMore:true,danmuLists:[{ text:"好听",color:"#ff00000", time:5},{ text:"真好",color:"#ff00000", time:6},{ text:"完美",color:"#ff00000", time:7},]},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.clearAllData()const id = options.idthis.getvideo()this.feachgetMvInfo(id)this.feachgetMvInfos(id)this.feachgetMvRelate(id)},async feachgetMvInfo(id){const res = await getMvUrlInfo(id)this.setData({mvUrl:res.data.url})},async feachgetMvInfos(id){const res = await getMvInfos(id)this.setData({mvInfos : res.data})console.log(res.data)},async feachgetMvRelate(id){const res = await getMvRelate(id)this.setData({mvRelate : res.data})console.log("更多信息：",res.data)},async getvideo(){const videolist = await getTopMv(this.data.offset)const newVideoList = [...this.data.videoLists,...videolist.data]this.setData({videoLists: newVideoList})this.data.offset+=10this.data.hasMore = videolist.hasMoreconsole.log("视频列表中的数据：",this.data.videoLists)},onClickItem(event){console.log(event)const videoid = event.currentTarget.dataset.itemconsole.log("要播放视频id",event.currentTarget.dataset.item)this.data.videoid = videoidwx.navigateTo({url: `/pages/video-info/video-info?id=${videoid}`,})console.log("完成跳转")},clearAllData(){this.data.id=0,this.data.videoid=0,this.data.mvUrl=""this.data.mvInfos={},this.data.mvRelate={},this.data.videoLists=[],this.data. offset=0,this.data.hasMore=true},onReachBottom() {this.getvideo()}
})

/* pages/video-info/video-info.wxss */
page{height: 100vh;
}
.video{width: 100%;
} 
/* pages/main-video/main-video.wxss */
.videoList{display: flex;flex-wrap: wrap;justify-content: space-around;padding:0 10rpx;
}
.item{width: 48%;
} 
.content {/* height: 325px; */height: calc(100% - 225px);
}/* 在wxss文件中 */
.container {display: flex;flex-direction: row;align-items: center; /* 垂直居中对齐 */margin-left: 18px;
}.image {width: 120px;height: 120px;margin-right: 20px;margin-top: 18px;margin-bottom: 24px;
}.text-container {flex: 1;  margin-right: 20px;
}.text {font-size: 18px;color: #333; }

{"usingComponents": {"video-item":"/components/video-items/video-item"},"enablePullDownRefresh": true
}