信我或關(guān)注微信號:獅范兒,回復(fù):學習,獲取免費學習資源包。
演示效果圖:
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; }
來源網(wǎng)絡(luò),侵權(quán)聯(lián)系刪除
私信我或關(guān)注微信號:獅范兒,回復(fù):學習,獲取免費學習資源包。
在前面的話:
最近一波H5廣告火爆整個互聯(lián)網(wǎng)圈,身為圈內(nèi)人,我們怎能 不! 知!道!
:( 噓!真不知道的也繼續(xù)看下去,有收獲 ↓ )
So,搞懂這個并不難。
這篇文章將帶你從頭到尾了解H5廣告的實現(xiàn)。
本文主要講一下幾個關(guān)鍵點
一、視頻內(nèi)聯(lián)播放。
-- 想要營造一種文字與視頻混排的現(xiàn)象,視頻不要影響其他模塊
二、視頻去控件。
-- 交互視頻,不能點擊快/慢進或暫停哦
三、去控件全屏播放。
-- 想要模擬 明星給我打電話的體驗,不能看到明顯的視頻播放器
四、視頻自動播放。
-- 想要釋放用戶操作,打開鏈接就自動播放
五、黑屏問題。
-- 開始播放時,有一段黑屏時間,不能無縫銜接
六、其他屬性和方法。
-- 喜歡一個技術(shù),就要了解“她”的全部,這些你也看看唄
一、video 標簽內(nèi)聯(lián)播放
Video 標簽內(nèi)聯(lián)播放,需要添加屬性:
webkit-playsinline="true" playsinline=“true”
通過上述代碼可以達到蘋果手機非全屏(內(nèi)聯(lián))播放的效果,安卓上退出全屏后也可以通過底部的播放按鈕非全屏播放。
而在 iphone上 默認是全屏播放的。
需要在 Obj-C 里,webview設(shè)置allowsInlineMediaPlayback屬性為YES
webview.allowsInlineMediaPlayback = YES;
這個需要客戶端的同學注意一下。
iOS 10 之前的版本支持 webkit-playsinline,但是加了這個屬性后,在 iOS 9 上出現(xiàn)只能聽到聲音不能看到畫面的問題。
為了 兼容ios8、9 需要再加上這個庫 iphone-inline-video 一起使用。
[https://github.com/bfred-it/iphone-inline-video]
這里補充一下 iphone-inline-video 使用方法:
1.npm install --save iphone-inline-video
2.使用
iphone-inline-video在iOS 10上會自動禁用。
確保你使用這個playsinline屬性。
二、播放視頻去控件
實現(xiàn)上圖效果,可添加CSS:
此方法僅適用于 非全屏下去掉控件。
三、去控件全屏播放
實現(xiàn)去控件全屏播放步驟:
1、全屏實現(xiàn):將video視頻寬高設(shè)置為 100% (全屏)
2、去控件參照上面說的第二步
當然,如果想要實現(xiàn)真正的全屏(頂部的導(dǎo)航消失),針對x5內(nèi)核的可以使用 同層播放器。
新版的 TBS 內(nèi)核(>=036849)支持同層播放器的視頻播放器,且不需要申請白名單。
只需給 video 設(shè)置兩個屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true",播放效果自然服帖,效果如上圖。
四、視頻自動播放
設(shè)置屬性 autoplay
But , Android始終不能自動播放,需要手動調(diào)用:
開發(fā)中,遇到一個問題,在微信中始終無法實現(xiàn)自動播放,因為IOS和微信都是要求用戶有操作后才能自動播放影音視頻。
這里,找到了一個hack方法:
微信中,可以監(jiān)聽 WeixinJSBridgeReady 事件,來實現(xiàn)視頻的自動播放
五、黑屏問題
ios 在播放視頻時,會出現(xiàn)短暫的黑屏(透屏),再正常顯示。
為了避免不正常顯示,我們可以這樣做:
在視頻上層覆蓋一個 使用視頻第一幀的圖片填充的“div 塊”,制造播放假象。然后監(jiān)聽事件 timeupdate ,視頻播放有畫面時移除這個“div塊”
六、常用屬性和事件
video 支持的屬性和事件很多,但在有些屬性和事件在不同的系統(tǒng)上跟預(yù)想的表現(xiàn)不一致,在嘗試比較之后,以下基本可以滿足需求:
1、autoplay 屬性
<video autoplay="true" />
設(shè)置此屬性,視頻將自動播放。
2、preload 屬性
<video preload="auto” />
規(guī)定是否預(yù)加載視頻。
可能的值:
* auto - 當頁面加載后載入整個視頻
* meta - 當頁面加載后只載入元數(shù)據(jù)
* none - 當頁面加載后不載入視頻
如果設(shè)置了 autoplay 屬性,則忽略該屬性。
3、timeupdate 事件
監(jiān)聽音頻/視頻(audio/video)的播放位置發(fā)生改變時觸發(fā)。通常與 video.currentTime 一同使用
4、ended 事件
監(jiān)聽視頻播放結(jié)束
后記:
網(wǎng)上關(guān)于video介紹的文章也挺多,通過搜集和自己的開發(fā)經(jīng)驗,這里整理了一些問題:
參考資料:
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
creenfull.js --瀏覽器全屏插件
screenfull.js是用于跨瀏覽器使用JavaScript Fullscreen API的簡單包裝器, 可讓您將頁面或任何元素全屏顯示, 并且平滑瀏覽器實現(xiàn)差異,
github地址:https://github.com/sindresorhus/screenfull.js 。
壓縮版下載地址: https://www.bootcdn.cn/screenfull.js/
項目中需要將后臺瀏覽器的窗口全屏, 也就是我們點擊一個按鈕要實現(xiàn)按F11全屏的效果。
在HTML5中,W3C制定了關(guān)于全屏的API, 就可以實現(xiàn)全屏幕的效果, 也可以讓頁面中的圖片,
視頻等全屏目前只有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);
實例:
http://robnyman.github.io/fullscreen/
html代碼:
<p>
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Cancel fullscreen</button>
</p>
js代碼
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。