国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

video同層播放層級過高遮擋模擬暫停按鈕的問題

xcold / 716人閱讀

摘要：首先在非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉如果視頻在里，你肯定會有這樣的需求，就是滑動到非視頻頁的時(shí)候，暫停視頻，并出現(xiàn)一個(gè)模擬的暫停按鈕在視頻上方。

在ios和android上有顯示的區(qū)別，如果你只是顯示一個(gè)普通的網(wǎng)頁，只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"，即可實(shí)現(xiàn)在微信上的同層播放；iOS和安卓顯示和播放沒有問題；
如果你跟我一樣想要把視頻放到swiper里，且不是在第一頁播放視頻，并想要視頻有圓角。那么問題就來了。首先在swiper非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉x5-video-player-type="h5"；如果視頻在swiper里，你肯定會有這樣的需求，就是滑動到非視頻頁的時(shí)候，暫停視頻，并出現(xiàn)一個(gè)模擬的暫停按鈕在視頻上方。這里可以這樣寫：

const mySwiper = new Swiper(".swiper-container", {
    direction: "vertical",
    on: {
      slideChangeTransitionEnd: function() {
        if (this.activeIndex != 1) {
          //暫停視頻代碼
        }
      }
    }
  })

這里定義一個(gè)是否顯示暫停的按鈕的變量showPoster，來顯示暫停模擬按鈕和隱藏video；
這里顯示播放按鈕必須和視頻顯示必須呈反相關(guān)，因?yàn)椴贿@樣作會有很多默認(rèn)的bug，導(dǎo)致video_container的overflow:hidden不生效，無法顯示圓角，這算是一種比較圓滑的做法了；我試過將video的position設(shè)為fixed 這樣雖然能正常顯示和隱藏模擬的點(diǎn)擊按鈕，但會讓父級的overflow：hidden失效。無法顯示視頻圓角。代碼大概如下：

注：如果你在swiper的非第一頁使用視頻，在安卓手機(jī)上會出現(xiàn)視頻黑屏但可以播放聲音的問題，這個(gè)時(shí)候就可以不使用安卓的同層播放，即不使用x5-video-player-type="h5"即可。
同層播放的資料參考鏈接：http://www.cnblogs.com/jinjin...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53464.html

相關(guān)文章

  • video同層播放層級過高遮擋模擬暫停按鈕的問題

    摘要：首先在非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉如果視頻在里，你肯定會有這樣的需求，就是滑動到非視頻頁的時(shí)候，暫停視頻，并出現(xiàn)一個(gè)模擬的暫停按鈕在視頻上方。 在ios和android上有顯示的區(qū)別，如果你只是顯示一個(gè)普通的網(wǎng)頁，只需要在iOS上加上webkit-playsinline=true 安卓上x5-video-p...

    forrest23 評論0 收藏0

  • video在安卓與ios實(shí)際應(yīng)用中遇到的問題及解決

    摘要：中在安卓與實(shí)際應(yīng)用中遇到的問題及解決安卓和對于中的兼容一直是大問題，各種不一樣，體驗(yàn)還很差。參考視頻播放踩坑小計(jì)中在安卓與實(shí)際應(yīng)用中遇到的問題及解決視頻標(biāo)簽的一些特殊屬性詳解微信中同層播放器接入教程標(biāo)簽在微信瀏覽器的問題解決方法 html5中video在安卓與ios實(shí)際應(yīng)用中遇到的問題及解決 安卓和IOS對于html5中的video兼容一直是大問題，各種不一樣，體驗(yàn)還很差。這段時(shí)間做一...

    AlphaGooo 評論0 收藏0

  • H5視頻活動踩坑

    摘要：最近做了一些嵌入視頻的活動，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會主動退出同層播放器的。 最近做了一些嵌入視頻的活動，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過的坑以及相應(yīng)的解決方案。1、碰到問題和解決方案1.1、ios 網(wǎng)頁中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會彈出播放器進(jìn)行全屏播放...

    walterrwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<