項目需求
- 圖片或者視頻在頁面中居中顯示（邊框圓角）
- 點擊圖片或者視頻時，全屏顯示/播放
看起來是很簡單吧，但是移動端仿荆、微信內(nèi)置的QQ垃圾瀏覽器組合起來臊泌，事情就沒有那么簡單了鲤桥。。渠概。還是先說簡單的吧茶凳。
圖片全屏
img標(biāo)簽上不綁定任何事件時，在安卓機(jī)上點擊可以全屏顯示播揪，再次點擊退出全屏贮喧，簡直是perfect。完全符合需求猪狈，但是Ｏ渎佟！雇庙！
在IOS的部分機(jī)型上谓形，點擊偽全屏顯示（微信頂部Bar有占位），再次點擊沒有反應(yīng)疆前。還有一些IOS機(jī)型是點擊完全沒有反應(yīng)寒跳。好吧，沒法偷懶了峡继。
由于有頂部Bar的存在冯袍，無法完全全屏實現(xiàn)（目前沒有發(fā)現(xiàn)可行方法）。降級為可視區(qū)域內(nèi)全屏顯示碾牌。
實現(xiàn)思路
- 首先獲取到手機(jī)可視區(qū)域的寬康愤。
var width = document.documentElement.clientWidth;
- 設(shè)置一個modal層，包含要顯示圖片舶吗，占滿全屏征冷，浮在最上層。
- 頁面剛開始加載進(jìn)入的時候誓琼，隱藏modal層检激。只顯示居中的圖片。
- 當(dāng)點擊居中的圖片時腹侣，顯示modal層叔收，點擊modal層時，隱藏modal傲隶。
視頻全屏播放
QQ垃圾瀏覽器video標(biāo)簽安卓機(jī)上面非常丑陋饺律，視頻播放完會自動加入推薦視頻。優(yōu)先級最高跺株，浮在最頂層复濒，不支持border-radius脖卖。
在某華為機(jī)型上不會自動全屏播放，在其他一些安卓機(jī)上全屏播放完返回頁面時巧颈，會導(dǎo)致樣式錯亂畦木，好像冒出去了似的。
QQ瀏覽器提供的同層播放器接入規(guī)范也并沒有什么卵用砸泛。
還是給大家隆重介紹一下video.js吧十籍。純英文文檔，對于小白的我來說晾嘶，看起來還是比較費勁的妓雾。我踩過的坑希望大家都能繞過去娶吞。
使用方法
引入方法：
第一種
<link rel="shortcut icon" type="image/ico" href="/static/favicon.ico" />
<link rel="stylesheet">
第二種
npm install video.js
初始化：
<video id="video" class="video-js"></video>
// 引入核心就在class="video-js"
或者使用js初始化垒迂，這里不再介紹
實例化對象：
var video=videojs('video');
// 對應(yīng)video標(biāo)簽的id
video.js相關(guān)的API豐富。
參考videojs入門指南1——videojs基礎(chǔ)使用
1. autoplay()獲取或者設(shè)置自動播放屬性
2. currentTime()設(shè)置或者獲取當(dāng)前播放進(jìn)度
3. duration()獲取視屏的總長度妒蛇，一般要等到視屏對象完全加載后才能獲取到机断，一般我們會使用定時輪詢的方式來獲取總時長
4. ended()獲取當(dāng)前視屏對象是否已經(jīng)處于結(jié)束狀態(tài)
5. enterFullWindow() 當(dāng)全屏不支持我們可以視頻容器延伸到瀏覽器將讓我們一樣寬。經(jīng)過試驗改api完全無法使視屏進(jìn)入全屏绣夺。分析源碼后發(fā)現(xiàn)真正進(jìn)入全屏的api應(yīng)該是requestFullscreen()吏奸，但可惜該api只能又手勢觸發(fā)函數(shù)執(zhí)行，連模擬點擊都沒法觸發(fā)他陶耍。
// requestFullscreen()這個我的庫中沒有這個API奋蔚？ 因此我用的isFullscreen。
6. exitFullscreen() 退出全屏烈钞，有效的
7. exitFullWindow() 退出全屏泊碑，試了沒什么用
8. height() 設(shè)置/獲取播放器的高度
9. width() 設(shè)置/獲取播放器的寬度
10. isFullscreen() 檢查是否處于全屏模式
11. load() 開始加載視屏
12. loop() 在視頻中獲取或設(shè)置循環(huán)屬性元素
13. muted() 獲取當(dāng)前的靜音狀態(tài)
14. pause() 暫停視頻
15. paused() 檢查視屏是否暫停
16. play() 播放視屏
17. played() 檢查視屏播放狀態(tài)
18. preload() 獲取或設(shè)置預(yù)加載屬性
19. ready() 視屏對象加載完成后調(diào)用ready中的回調(diào)函數(shù)
20. poster() 獲取或設(shè)置海報圖像源url
21. reset() 重載視屏
22. src() 更換視頻源
事件監(jiān)聽方法：
video.on('ended', function() {
//
});
需求實現(xiàn)思路
video.js解決了微信安卓端視頻播放完畢樣式混亂，但是依然無法實現(xiàn)四周圓角毯欣。只能做繞過處理馒过。進(jìn)入頁面顯示視頻的首幀圖和播放鍵，讓其看起來像是視頻的樣子酗钞。然后點擊后腹忽，真正的視頻標(biāo)簽全屏播放。這樣變向的實現(xiàn)圓角砚作。
<div class="share-video" >
<img class="poster" src="{{videoPoster}}" on-click="changePlay">
<img src="{{icon}}" class="pausePlay {{isPlay?'hidden':''}}" on-click="changePlay"/>
<video id="video" class="video-js" style="width:0px;height:0px;">
</video>
</div>
// SAN框架組件
// 組件attached生命周期函數(shù)中執(zhí)行
// res為ajax請求返回的數(shù)據(jù)窘奏，包含視頻和首幀圖的url
videoInit(res) {
this.data.set('videoPoster', res.data.image);
const video = videojs('video', {
sources: [{
src: res.data.video
}]
});
// 視頻初始化時，設(shè)置寬高為0葫录，隱藏
video.ready(() => {
video.width('0px');
video.height('0px');
});
video.isFullscreen(true);// 設(shè)置要全屏播放着裹。
video.on('ended', () => {
video.exitFullscreen();//退出全屏
video.width('0px');
video.height('0px');
this.showIcon();//顯示播放鍵
});
video.on('pause', this.showIcon.bind(this));
}
