整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
信我或關(guān)注微信號(hào)：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費(fèi)學(xué)習(xí)資源包。
演示效果圖：
1、全屏前
2、全屏后
html代碼：
<div class="container">
<p><em>單擊下面的按鈕將元素輸入全屏模式</em></p>
<div class="element" id="element"><p>我在全屏模式下改變顏色！</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
全屏!
</button>
</div>
css代碼：
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
來(lái)源網(wǎng)絡(luò)，侵權(quán)聯(lián)系刪除
私信我或關(guān)注微信號(hào)：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費(fèi)學(xué)習(xí)資源包。
在前面的話：
最近一波H5廣告火爆整個(gè)互聯(lián)網(wǎng)圈，身為圈內(nèi)人，我們?cè)跄?不！ 知！道！
:( 噓！真不知道的也繼續(xù)看下去，有收獲 ↓ ）
So，搞懂這個(gè)并不難。
這篇文章將帶你從頭到尾了解H5廣告的實(shí)現(xiàn)。
本文主要講一下幾個(gè)關(guān)鍵點(diǎn)
一、視頻內(nèi)聯(lián)播放。
-- 想要營(yíng)造一種文字與視頻混排的現(xiàn)象，視頻不要影響其他模塊
二、視頻去控件。
-- 交互視頻，不能點(diǎn)擊快/慢進(jìn)或暫停哦
三、去控件全屏播放。
-- 想要模擬 明星給我打電話的體驗(yàn)，不能看到明顯的視頻播放器
四、視頻自動(dòng)播放。
-- 想要釋放用戶操作，打開(kāi)鏈接就自動(dòng)播放
五、黑屏問(wèn)題。
-- 開(kāi)始播放時(shí)，有一段黑屏?xí)r間，不能無(wú)縫銜接
六、其他屬性和方法。
-- 喜歡一個(gè)技術(shù)，就要了解“她”的全部，這些你也看看唄
一、video 標(biāo)簽內(nèi)聯(lián)播放
Video 標(biāo)簽內(nèi)聯(lián)播放，需要添加屬性：
webkit-playsinline="true" playsinline=“true”
通過(guò)上述代碼可以達(dá)到蘋(píng)果手機(jī)非全屏（內(nèi)聯(lián)）播放的效果，安卓上退出全屏后也可以通過(guò)底部的播放按鈕非全屏播放。
而在 iphone上 默認(rèn)是全屏播放的。
需要在 Obj-C 里，webview設(shè)置allowsInlineMediaPlayback屬性為YES
webview.allowsInlineMediaPlayback = YES;
這個(gè)需要客戶端的同學(xué)注意一下。
iOS 10 之前的版本支持 webkit-playsinline，但是加了這個(gè)屬性后，在 iOS 9 上出現(xiàn)只能聽(tīng)到聲音不能看到畫(huà)面的問(wèn)題。
為了 兼容ios8、9 需要再加上這個(gè)庫(kù) 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上會(huì)自動(dòng)禁用。
確保你使用這個(gè)playsinline屬性。
二、播放視頻去控件
實(shí)現(xiàn)上圖效果，可添加CSS:
此方法僅適用于 非全屏下去掉控件。
三、去控件全屏播放
實(shí)現(xiàn)去控件全屏播放步驟：
1、全屏實(shí)現(xiàn)：將video視頻寬高設(shè)置為 100% （全屏）
2、去控件參照上面說(shuō)的第二步
當(dāng)然，如果想要實(shí)現(xiàn)真正的全屏（頂部的導(dǎo)航消失），針對(duì)x5內(nèi)核的可以使用 同層播放器。
新版的 TBS 內(nèi)核（>=036849）支持同層播放器的視頻播放器，且不需要申請(qǐng)白名單。
只需給 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)用：
開(kāi)發(fā)中，遇到一個(gè)問(wèn)題，在微信中始終無(wú)法實(shí)現(xiàn)自動(dòng)播放，因?yàn)镮OS和微信都是要求用戶有操作后才能自動(dòng)播放影音視頻。
這里，找到了一個(gè)hack方法：
微信中，可以監(jiān)聽(tīng) WeixinJSBridgeReady 事件，來(lái)實(shí)現(xiàn)視頻的自動(dòng)播放
五、黑屏問(wèn)題
ios 在播放視頻時(shí)，會(huì)出現(xiàn)短暫的黑屏（透屏），再正常顯示。
為了避免不正常顯示，我們可以這樣做：
在視頻上層覆蓋一個(gè) 使用視頻第一幀的圖片填充的“div 塊”，制造播放假象。然后監(jiān)聽(tīng)事件 timeupdate ，視頻播放有畫(huà)面時(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)頁(yè)面加載后載入整個(gè)視頻
* meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù)
* none - 當(dāng)頁(yè)面加載后不載入視頻
如果設(shè)置了 autoplay 屬性，則忽略該屬性。
3、timeupdate 事件
監(jiān)聽(tīng)音頻/視頻（audio/video）的播放位置發(fā)生改變時(shí)觸發(fā)。通常與 video.currentTime 一同使用
4、ended 事件
監(jiān)聽(tīng)視頻播放結(jié)束
后記：
網(wǎng)上關(guān)于video介紹的文章也挺多，通過(guò)搜集和自己的開(kāi)發(fā)經(jīng)驗(yàn)，這里整理了一些問(wèn)題：
參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://x5.tencent.com/tbs/guide/video.html
作者:大轉(zhuǎn)轉(zhuǎn) - 張穎
來(lái)源:微信公眾號(hào):大轉(zhuǎn)轉(zhuǎn)FE
出處:https://mp.weixin.qq.com/s/Bz8Ra1coFirSnwsqacifVw
creenfull.js --瀏覽器全屏插件
screenfull.js是用于跨瀏覽器使用JavaScript Fullscreen API的簡(jiǎn)單包裝器, 可讓您將頁(yè)面或任何元素全屏顯示, 并且平滑瀏覽器實(shí)現(xiàn)差異,
github地址：https://github.com/sindresorhus/screenfull.js 。
壓縮版下載地址: https://www.bootcdn.cn/screenfull.js/
項(xiàng)目中需要將后臺(tái)瀏覽器的窗口全屏, 也就是我們點(diǎn)擊一個(gè)按鈕要實(shí)現(xiàn)按F11全屏的效果。
在HTML5中,W3C制定了關(guān)于全屏的API, 就可以實(shí)現(xiàn)全屏幕的效果, 也可以讓頁(yè)面中的圖片,
視頻等全屏目前只有g(shù)oogle chrome 15 +, safri5.1+,firfox10+,IE11支持
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);實(shí)例:
http://robnyman.github.io/fullscreen/
html代碼:
<p>
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Cancel fullscreen</button>
</p>js代碼
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
