資訊專欄INFORMATION COLUMN
摘要：首先在非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉如果視頻在里，你肯定會有這樣的需求，就是滑動到非視頻頁的時候，暫停視頻，并出現(xiàn)一個模擬的暫停按鈕在視頻上方。
在ios和android上有顯示的區(qū)別，如果你只是顯示一個普通的網(wǎng)頁，只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"，即可實現(xiàn)在微信上的同層播放；iOS和安卓顯示和播放沒有問題；
如果你跟我一樣想要把視頻放到swiper里，且不是在第一頁播放視頻，并想要視頻有圓角。那么問題就來了。首先在swiper非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉x5-video-player-type="h5"；如果視頻在swiper里，你肯定會有這樣的需求，就是滑動到非視頻頁的時候，暫停視頻，并出現(xiàn)一個模擬的暫停按鈕在視頻上方。這里可以這樣寫：
const mySwiper = new Swiper(".swiper-container", {
direction: "vertical",
on: {
slideChangeTransitionEnd: function() {
if (this.activeIndex != 1) {
//暫停視頻代碼
}
}
}
})
這里定義一個是否顯示暫停的按鈕的變量showPoster，來顯示暫停模擬按鈕和隱藏video；
這里顯示播放按鈕必須和視頻顯示必須呈反相關(guān)，因為不這樣作會有很多默認(rèn)的bug，導(dǎo)致video_container的overflow:hidden不生效，無法顯示圓角，這算是一種比較圓滑的做法了；我試過將video的position設(shè)為fixed 這樣雖然能正常顯示和隱藏模擬的點擊按鈕，但會讓父級的overflow：hidden失效。無法顯示視頻圓角。代碼大概如下：
注：如果你在swiper的非第一頁使用視頻，在安卓手機(jī)上會出現(xiàn)視頻黑屏但可以播放聲音的問題，這個時候就可以不使用安卓的同層播放，即不使用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/100213.html
摘要：首先在非第一屏播放安卓會出現(xiàn)的問題是豎屏只有聲音沒有圖像，我嘗試了好久只需要去掉安卓部分的同層播放代碼即可，即去掉如果視頻在里，你肯定會有這樣的需求，就是滑動到非視頻頁的時候，暫停視頻，并出現(xiàn)一個模擬的暫停按鈕在視頻上方。 在ios和android上有顯示的區(qū)別，如果你只是顯示一個普通的網(wǎng)頁，只需要在iOS上加上webkit-playsinline=true 安卓上x5-video-p...
摘要：中在安卓與實際應(yīng)用中遇到的問題及解決安卓和對于中的兼容一直是大問題，各種不一樣，體驗還很差。參考視頻播放踩坑小計中在安卓與實際應(yīng)用中遇到的問題及解決視頻標(biāo)簽的一些特殊屬性詳解微信中同層播放器接入教程標(biāo)簽在微信瀏覽器的問題解決方法 html5中video在安卓與ios實際應(yīng)用中遇到的問題及解決 安卓和IOS對于html5中的video兼容一直是大問題，各種不一樣，體驗還很差。這段時間做一...
閱讀 2060·2021-11-23 09:51
閱讀 3353·2021-09-28 09:36
閱讀 1120·2021-09-08 09:35
閱讀 1758·2021-07-23 10:23
閱讀 3258·2019-08-30 15:54
閱讀 2998·2019-08-29 17:05
閱讀 438·2019-08-29 13:23
閱讀 1294·2019-08-28 17:51
