在前面的話：

最近一波H5廣告火爆整個(gè)互聯(lián)網(wǎng)圈，身為圈內(nèi)人，我們怎能 不！ 知！道！

:( 噓！真不知道的也繼續(xù)看下去，有收獲 ↓ ）

So，搞懂這個(gè)并不難。

這篇文章將帶你從頭到尾了解H5廣告的實(shí)現(xiàn)。

本文主要講一下幾個(gè)關(guān)鍵點(diǎn)

一、視頻內(nèi)聯(lián)播放。

-- 想要營造一種文字與視頻混排的現(xiàn)象，視頻不要影響其他模塊

二、視頻去控件。

-- 交互視頻，不能點(diǎn)擊快/慢進(jìn)或暫停哦

三、去控件全屏播放。

-- 想要模擬 明星給我打電話的體驗(yàn)，不能看到明顯的視頻播放器

四、視頻自動(dòng)播放。

-- 想要釋放用戶操作，打開鏈接就自動(dòng)播放

五、黑屏問題。

-- 開始播放時(shí)，有一段黑屏?xí)r間，不能無縫銜接

六、其他屬性和方法。

-- 喜歡一個(gè)技術(shù)，就要了解“她”的全部，這些你也看看唄

一、video 標(biāo)簽內(nèi)聯(lián)播放

Video 標(biāo)簽內(nèi)聯(lián)播放，需要添加屬性：

webkit-playsinline="true" playsinline=“true”

通過上述代碼可以達(dá)到蘋果手機(jī)非全屏（內(nèi)聯(lián)）播放的效果，安卓上退出全屏后也可以通過底部的播放按鈕非全屏播放。

而在 iphone上 默認(rèn)是全屏播放的。

需要在 Obj-C 里，webview設(shè)置allowsInlineMediaPlayback屬性為YES
webview.allowsInlineMediaPlayback = YES;

這個(gè)需要客戶端的同學(xué)注意一下。

iOS 10 之前的版本支持 webkit-playsinline，但是加了這個(gè)屬性后，在 iOS 9 上出現(xiàn)只能聽到聲音不能看到畫面的問題。

為了 兼容ios8、9 需要再加上這個(gè)庫 iphone-inline-video 一起使用。

[https://github.com/bfred-it/iphone-inline-video]

這里補(bǔ)充一下 iphone-inline-video 使用方法：

1.npm install --save iphone-inline-video

2.使用

iphone-inline-video在iOS 10上會自動(dòng)禁用。

確保你使用這個(gè)playsinline屬性。

二、播放視頻去控件

實(shí)現(xiàn)上圖效果，可添加CSS:

此方法僅適用于 非全屏下去掉控件。

三、去控件全屏播放

實(shí)現(xiàn)去控件全屏播放步驟：

1、全屏實(shí)現(xiàn)：將video視頻寬高設(shè)置為 100% （全屏）

2、去控件參照上面說的第二步

當(dāng)然，如果想要實(shí)現(xiàn)真正的全屏（頂部的導(dǎo)航消失），針對x5內(nèi)核的可以使用 同層播放器。

新版的 TBS 內(nèi)核（>=036849）支持同層播放器的視頻播放器，且不需要申請白名單。

只需給 video 設(shè)置兩個(gè)屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果自然服帖，效果如上圖。

四、視頻自動(dòng)播放

設(shè)置屬性 autoplay

But , Android始終不能自動(dòng)播放，需要手動(dòng)調(diào)用：

開發(fā)中，遇到一個(gè)問題，在微信中始終無法實(shí)現(xiàn)自動(dòng)播放，因?yàn)镮OS和微信都是要求用戶有操作后才能自動(dòng)播放影音視頻。

這里，找到了一個(gè)hack方法：

微信中，可以監(jiān)聽 WeixinJSBridgeReady 事件，來實(shí)現(xiàn)視頻的自動(dòng)播放

五、黑屏問題

ios 在播放視頻時(shí)，會出現(xiàn)短暫的黑屏（透屏），再正常顯示。

為了避免不正常顯示，我們可以這樣做：

在視頻上層覆蓋一個(gè) 使用視頻第一幀的圖片填充的“div 塊”，制造播放假象。然后監(jiān)聽事件 timeupdate ，視頻播放有畫面時(shí)移除這個(gè)“div塊”

六、常用屬性和事件

video 支持的屬性和事件很多，但在有些屬性和事件在不同的系統(tǒng)上跟預(yù)想的表現(xiàn)不一致，在嘗試比較之后，以下基本可以滿足需求：

1、autoplay 屬性

<video autoplay="true" />

設(shè)置此屬性，視頻將自動(dòng)播放。

2、preload 屬性

<video preload="auto” />

規(guī)定是否預(yù)加載視頻。

可能的值：

* auto - 當(dāng)頁面加載后載入整個(gè)視頻

* meta - 當(dāng)頁面加載后只載入元數(shù)據(jù)

* none - 當(dāng)頁面加載后不載入視頻

如果設(shè)置了 autoplay 屬性，則忽略該屬性。

3、timeupdate 事件

監(jiān)聽音頻/視頻（audio/video）的播放位置發(fā)生改變時(shí)觸發(fā)。通常與 video.currentTime 一同使用

4、ended 事件

監(jiān)聽視頻播放結(jié)束

后記：

網(wǎng)上關(guān)于video介紹的文章也挺多，通過搜集和自己的開發(fā)經(jīng)驗(yàn)，這里整理了一些問題：

• 因?yàn)橐曨l是一邊播放一邊加載，因此不但視頻的大小會影響加載體驗(yàn)，視頻的清晰度對加載體驗(yàn)影響更大。
• 建議視頻1S平均大小范圍控制在0.09~0.17M
• 視頻格式建議使用mp4
• 如果 在android 環(huán)境中，想要隱藏 video 播放器，style屬性 這樣寫：{ position: relative; display: none; z-index: -1; }

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

https://x5.tencent.com/tbs/guide/video.html

作者:大轉(zhuǎn)轉(zhuǎn) - 張穎

來源:微信公眾號:大轉(zhuǎn)轉(zhuǎn)FE

出處:https://mp.weixin.qq.com/s/Bz8Ra1coFirSnwsqacifVw

務(wù)8：全屏模式的切換。

這張就是第八，第八小姐就是講關(guān)于全屏模式的切換。回到頁面，希望有個(gè)按鈕，一點(diǎn)全屏娛樂模式，這一點(diǎn)就切換回來。可能我個(gè)人不太喜歡這種模式，但有的人會用，還是把它設(shè)計(jì)進(jìn)去。

然后就在這個(gè)地方加一個(gè)圖標(biāo)，有空再找一下。找了一個(gè)圖標(biāo)，就找這個(gè)。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點(diǎn)，再給它大一點(diǎn)，size，就不要說是二十，可以。點(diǎn)它，現(xiàn)在沒效果，來做這個(gè)效果。

首先給它定一個(gè)變量叫is war screen，是不是全屏的？它肯定是響應(yīng)數(shù)據(jù)了，i e f，它不是默認(rèn)，當(dāng)然響應(yīng)數(shù)據(jù)這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個(gè)相對的，跟它相反的按鈕，收回來的按鈕，就用這個(gè)。

off for screen one，就這個(gè)，給它來復(fù)制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個(gè)方法，就這樣可以，可能還做其他的，記得就給它定一個(gè)top切換螺絲功能，它是一個(gè)，然后再調(diào)整這個(gè)方法就行了。

就要投screen，點(diǎn)，沒效果，為啥沒效果？是不是點(diǎn)錯(cuò)了？這邊點(diǎn)這上面，再說下面一個(gè)，放到槍上，點(diǎn)，看有切換效果了。怎么樣給它切換？這個(gè)是節(jié)食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點(diǎn)a request，press greet plug，就是全屏切換。

這里切換了，這點(diǎn)沒效果只按a xe，所以這邊也不對，所以希望它變成這個(gè)時(shí)候就把它縮回來，這邊就要做一個(gè)判斷了，就是來判斷它是不是已經(jīng)縮放了，如果它已經(jīng)是展開了，就把它縮回來，也是，這個(gè)就退出，否則就把它刪遠(yuǎn)，就簡單的刪遠(yuǎn)，刪除就可以了。

試一下，點(diǎn)，點(diǎn)，回來了，點(diǎn)，點(diǎn)，再配合原來的一點(diǎn)，就全屏顯示了，舒服了，點(diǎn)回來。這一章就講完了，就把頁面布局都弄好了，包括動(dòng)態(tài)生成菜單頁，瀏覽歷史頁，面包穴導(dǎo)航，把整個(gè)布局就全做好了。

下一張開始做具體業(yè)務(wù)了，首先叫做用戶的登錄，注冊新用戶，還有一個(gè)重置密碼。這節(jié)課就講到這里，拜拜。

么是全屏布局

全屏布局就是指 HTML 頁面鋪滿整個(gè)瀏覽器窗口, 并且沒有滾動(dòng)條。而且還可以跟隨瀏覽器的大小變化而變化。