H5中音訊視訊的自動播放以及同層播放問題
阿新 • • 發佈:2019-01-23
自動播放
講真,真的很煩這個自動播放的問題,移動端是不允許自動播放的啊,但是客戶就是想讓自動播放,而且還不許有點選事件(哼)。但是我手裡的專案很多都是在微信裡轉發和推送的,既然這樣,我們可以在微信的ready事件裡新增上video.play() or audio.play()的事件執行
首先咧,當然是要引入微信的js啦:
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
然後呢,重點來啦:
wx.ready(function () { audio.play(); wx.onMenuShareTimeline({ title: wechatShareText.title, link: wechatShareText.link, imgUrl: wechatShareText.image, success: function () { } }); wx.onMenuShareAppMessage({ title: wechatShareText.title, desc: wechatShareText.description, link: wechatShareText.link, imgUrl: wechatShareText.image, type: '', dataUrl: '', success: function () { } }); });
完美解決哈哈哈
視訊同層播放
這個網上有很多的介紹吼,就不多囉嗦了,直接粘過來前輩的好了(我這麼懶...),以下:
微信在video標籤上新增了一些x5的私有屬性,分別是:
x5-video-player-type
啟用同層播放。取值固定為'h5'
。x5-video-player-fullscreen
是否全屏。取值為'true'
或'false'
。x5-video-orientation
視訊方向。取值分別為'landscape'
、'portrait'
或者'landscape|portrait'
,分別對應橫屏、豎屏及自動旋轉(這個應該用的少)。
不過有一點需要注意的是,這些都是x5的私有屬性,僅適用於Android平臺。而跟iOS平臺相關的,則是這幾個屬性:
airplay
x-webkit-airplay
playsinline
webkit-playsinline
其中最後兩個是iOS平臺下的內聯播放屬性,都是布林屬性,不需要賦值(存在即是true);前兩個是iOS平臺下airplay的相關屬性(說實話我現在也沒搞明白為什麼網頁需要airplay屬性),取值為'allow'
或'deny'
,通常保險起見用'allow'
就可以。
180605更新:
.play()方法!!只能再行在使用者的操作之後!!!比如點選上滑下滑什麼之類的動作!!!