首先上面是一個視頻播放器

?

把視頻的寬度設(shè)置為100%即可鋪滿全屏

然后視頻的標題和作者

最后就是一個視頻播放列表 ，設(shè)置一個固定位置開始滾動即可

還有一個問題沒有解決，大家出出主意。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-821923.html

?在播放頁面在點擊一個新的視頻去播放，點進去的新視頻獲取不到自身的id,就導致后面的數(shù)據(jù)無法顯示。

頁面代碼

<!--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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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},
    ]
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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("視頻列表中的數(shù)據(jù)：",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("完成跳轉(zhuǎn)")
  },
  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
}

到了這里，關(guān)于小程序進階學習（視頻完結(jié)）（核心，重點）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！