昨天剛寫了一個小程序多視頻播放的demo，今天就遇著坑了...本來是想做成類似于抖音視頻播放的那種模式，一個視頻列表，點擊視頻進(jìn)去可以實現(xiàn)上拉下滑加載視頻的效果。
但小程序的video組件監(jiān)聽不了上拉下滑的事件。我靈光一閃，加一個scroll-view不就得了，但是小程序API文檔里關(guān)于video組件的最后三行直接把我的想法送去見上帝了。它是這么說的：
tip:?video?組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。
tip: 請勿在?scroll-view、swiper、picker-view、movable-view?中使用?video?組件。
tip:?css?動畫對?video?組件無效。
但我依舊賊心不死，想做個頁面嵌套來控制video，最終還是以失敗告終。小程序貌似無法控制組件之間的層級關(guān)系。所以我最終用onPullDownRefresh來控制下拉刷新，上拉加載我實在是沒想到好的方法。退而求其次，我用上次寫的視頻播放完后自動加載下一個視頻的功能來代替了。如果哪位大神有好的想法還請不吝賜教~先貼下我寫的代碼。
wxml:
js:
const app = getApp()
var that
var getData = require('../../../utils/util.js')
Page({
? data: {
? ? teachingVideoList:[],//視頻集合
? ? src: '', //視頻地址
? ? videoId: 0,//視頻ID
? ? videoFlag: true,
? ? videoPlayFlag:false
? },
? onLoad: function () {
? ? that = this
? ? wx.request({
? ? ? url: app.data.serverUrl + 'upload_queryTeachingVideo.action',
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? teachingVideoList: res.data.teachingVideoList,
? ? ? ? })
? ? ? }
? ? })
? },
? onReady: function (res) {
? ? this.videoContext = wx.createVideoContext('myVideo')
? },
? //視頻播放結(jié)束觸發(fā)的事件,視頻播放結(jié)束播放下一個視頻
? videoEnd: function (res) {
? ? that = this
? ? that.setData({
? ? ? ? videoId: res.currentTarget.dataset.videoid+1
? ? })
? ? if (that.data.videoId == that.data.teachingVideoList.length) {
? ? ? wx.showToast({
? ? ? ? title: '已播放完成',
? ? ? ? icon: 'loading',
? ? ? ? duration: 2500,
? ? ? ? mask: true,
? ? ? })
? ? ? this.videoContext.pause()
? ? } else {
? ? ? getData.alertWait('播放下一個視頻', that.playVideo(that.data.videoId))
? ? }
? },
? //播放當(dāng)前視頻
? playVideo: function (videoId) {
? ? wx.request({
? ? ? url: app.data.serverUrl + 'upload_videoUrl.action',
? ? ? data: {
? ? ? ? id: videoId
? ? ? },
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? src: res.data.videoUrl,
? ? ? ? ? videoId: videoId,
? ? ? ? ? videoFlag: false,
? ? ? ? ? videoPlayFlag: true
? ? ? ? })
? ? ? }
? ? })
? },
? //開始播放視頻觸發(fā)的事件
? startPlayVideo: function (res) {
? ? that = this
? ? var videoId = res.currentTarget.dataset.videoid
? ? that.playVideo(videoId);
? },
? //下拉播放上一個視頻
? onPullDownRefresh: function () {
? ? that = this
? ? if (that.data.videoId == 1) {
? ? ? wx.showToast({
? ? ? ? title: '沒有上一個視頻了',
? ? ? ? icon: 'loading',
? ? ? ? duration: 2500,
? ? ? ? masmask: true,
? ? ? })
? ? } else {
? ? ? that.setData({
? ? ? ? videoId: that.data.videoId - 1,
? ? ? ? videoFlag: false,
? ? ? ? videoPlayFlag: true
? ? ? })
? ? ? that.playVideo(that.data.videoId);
? ? }
? },
? //返回
? upperPage: function(){
? ? that.setData({
? ? ? videoFlag: true,
? ? ? videoPlayFlag: false
? ? })
? }
})
json:
當(dāng)視頻全屏播放結(jié)束的時候，在真機測試退出全屏的體驗感并不好，所以設(shè)計成當(dāng)點擊視頻播放的時候在另一個頁面展示視頻。如有不足之處，還請多多指教哦~
