1. 程式人生 > >H5中音訊視訊的自動播放以及同層播放問題

H5中音訊視訊的自動播放以及同層播放問題

自動播放

講真,真的很煩這個自動播放的問題,移動端是不允許自動播放的啊,但是客戶就是想讓自動播放,而且還不許有點選事件(哼)。但是我手裡的專案很多都是在微信裡轉發和推送的,既然這樣,我們可以在微信的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的私有屬性,分別是:

  1. x5-video-player-type
    啟用同層播放。取值固定為'h5'

  2. x5-video-player-fullscreen
    是否全屏。取值為'true''false'

  3. x5-video-orientation
    視訊方向。取值分別為'landscape''portrait'或者'landscape|portrait',分別對應橫屏、豎屏及自動旋轉(這個應該用的少)。

不過有一點需要注意的是,這些都是x5的私有屬性,僅適用於Android平臺。而跟iOS平臺相關的,則是這幾個屬性:

  1. airplay

  2. x-webkit-airplay

  3. playsinline

  4. webkit-playsinline

其中最後兩個是iOS平臺下的內聯播放屬性,都是布林屬性,不需要賦值(存在即是true);前兩個是iOS平臺下airplay的相關屬性(說實話我現在也沒搞明白為什麼網頁需要airplay屬性),取值為'allow''deny',通常保險起見用'allow'就可以。

以上--摘自點選開啟連結 https://segmentfault.com/a/1190000008782550

180605更新:

.play()方法!!只能再行在使用者的操作之後!!!比如點選上滑下滑什麼之類的動作!!!