解決微信小程序視頻組件層級過高的問題

Rocture 發布于2019-08-22 13:52 / 1386人閱讀

摘要：本文首發于我的個人博客前言在微信小程序的開發中，總有一些組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。問題描述由于視頻組件層級過高并且無法使用進行控制層級，導致許多人都無法在視頻組件之上放置一些其他的組件。

本文首發于我的個人博客：http://www.fogcrane.org

前言

在微信小程序的開發中，總有一些“VIP”組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。
諸如：video組件、map組件、canvas組件等。現在就讓我來講講如何巧妙的解決掉這個問題。

問題描述

由于視頻組件層級過高并且無法使用z-index進行控制層級，導致許多人都無法在視頻組件之上放置一些其他的組件。
為此，一些漂亮的視頻設計往往還沒開始就宣告了結束。上一張官方文檔的相關說明：

解決方案

解決思路其實也挺簡單的。今天就暫且不宣揚愚公移山的精神了，我們今天選擇繞過眼前的大山。既然視頻層級很高
很高，并且我們不能降低視頻層級或者提升其他組件層級已覆蓋視頻組件。那么我們就選擇只在恰當的時候才讓視頻
組件出現在我們的頁面中。那么問題就顯得簡單起來了。思路大致如下：

在渲染頁面的時候，使用假視頻來代替視頻組件，換言之就是使用視頻封面充當一個視頻組件。

當用戶點擊視頻封面時，進行兩步操作，第一，隱藏視頻封面；第二，播放視頻。

當存在同一頁面多視頻的時候，需要進行視頻切換的處理。

接下來直接上代碼了：
首先是wxml的代碼：

接著是js的代碼：

//index.js
Page({
  data: {
    curr_id: "",   //當前打開的視頻id
    items: [
      {
        id: 1, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      }, {
        id: 2, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 3, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 4, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
    ],
  },
  onReady: function () {  //創建視頻上下文對象
    this.videoContext = wx.createVideoContext("myVideo")
  },
  videoPlay(e) {
    this.setData({
      curr_id: e.currentTarget.dataset.id,
    })
    this.videoContext.play()
  }
})

最后是css的代碼：

/*index.wxss*/
.video{
    margin-bottom: 40rpx;
    position: relative;
}
.model-img{
    width: 100%;
    height: 420rpx;
}
.model-btn{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    width:100rpx;
    height:100rpx;
    border-radius:50%;
    background-color: rgba(0,0,0,.3);
}
.play-icon{
    margin:28rpx 42rpx;
    border-top:26rpx solid transparent;
    border-left:36rpx solid #fff;
    border-bottom:22rpx solid transparent;
}
.text{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: red;
  color: #fff;
  position: fixed;
  bottom: 0;
}

以上，就是全部代碼了，附上運行結果圖：

代碼下載

自定義視頻組件代碼，密碼為30s3

結語

好看的皮囊千篇一律，有趣的靈魂萬里挑一。祝各位都是有趣的程序媛/猿。嗨起來?(?????)?

云服務器 GPU云服務器微信小程序組件微信小程序實時音視頻不用編程制作微信小程序視頻微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92564.html

解決微信小程序視頻組件層級過高的問題

摘要：本文首發于我的個人博客前言在微信小程序的開發中，總有一些組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。問題描述由于視頻組件層級過高并且無法使用進行控制層級，導致許多人都無法在視頻組件之上放置一些其他的組件。本文首發于我的個人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

genefy 2019-08-01 18:24 評論0 收藏0
解決微信小程序視頻組件層級過高的問題

摘要：本文首發于我的個人博客前言在微信小程序的開發中，總有一些組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。問題描述由于視頻組件層級過高并且無法使用進行控制層級，導致許多人都無法在視頻組件之上放置一些其他的組件。本文首發于我的個人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

HitenDev 2019-08-29 14:14 評論0 收藏0
關于微信小程序的視頻的坑

摘要：需求背景最新在忙一個需求，就是小程序的課程詳情的展示視頻，如下圖層級過高在小程序的官方文檔的話是有介紹的目前解決的方案使用標簽可以覆蓋到原生組件中。需求背景：最新在忙一個需求，就是小程序的課程詳情的展示視頻，如下圖 showImg(https://segmentfault.com/img/bVbkBlI?w=462&h=1034); video層級過高在小程序的官方文檔的話是有介...

yimo 2019-08-23 13:54 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

Lowky 2019-08-30 11:07 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

elina 2019-08-02 15:15 評論0 收藏0