首先上面是一个视频播放器
把视频的宽度设置为100%即可铺满全屏
然后视频的标题和作者
最后就是一个视频播放列表 ，设置一个固定位置开始滚动即可
文章来源：https://www.toymoban.com/news/detail-821923.html
还有一个问题没有解决，大家出出主意。
文章来源地址https://www.toymoban.com/news/detail-821923.html
在播放页面在点击一个新的视频去播放，点进去的新视频获取不到自身的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.id
this.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+=10
this.data.hasMore = videolist.hasMore
console.log("视频列表中的数据：",this.data.videoLists)
},
onClickItem(event){
console.log(event)
const videoid = event.currentTarget.dataset.item
console.log("要播放视频id",event.currentTarget.dataset.item)
this.data.videoid = videoid
wx.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
}到了这里，关于小程序进阶学习（视频完结）（核心，重点）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
