在移動(dòng)和PC自適應(yīng)頁(yè)面做視頻彈窗控制小案例

vpants 發(fā)布于2019-08-29 13:52 / 2904人閱讀

摘要：因此，此處又用首先查詢(xún)是否為，暨是否顯示，如果不顯示，就直接設(shè)置彈窗的高度為零。

由于在視頻專(zhuān)題頁(yè)項(xiàng)目中需要鏈接騰訊視頻，然后再在網(wǎng)頁(yè)端以彈窗的形式展現(xiàn)，且需要彈窗顯示時(shí)候視頻播放，彈窗關(guān)閉時(shí)候視頻停止，在之前的查閱資料中看到很多案例都說(shuō)的不是很清晰，今天在經(jīng)過(guò)多次嘗試后終于成功了，分享一下，代碼如下：

引用的庫(kù)
需要用的有：jQuery, boostrap框架.

HTML 結(jié)構(gòu)如下

                    

                        
                            
                        
                        
                            
                                
                                    
                                        
                                        Modal title

JS 如下：

這里的html 代碼引用了boostrap的模態(tài)框作為彈窗的框架，可以方便的進(jìn)行彈窗的顯示和隱藏。而且使用了iframe 作為插入視頻的工具，因?yàn)榻?jīng)過(guò)測(cè)試，embed標(biāo)簽使用的時(shí)候有問(wèn)題，在移動(dòng)端不被識(shí)別，而iframe則顯示正常，所以使用了iframe.
其中需要注意的點(diǎn)是：默認(rèn)的彈窗的寬高是固定的，由于需要進(jìn)行自適應(yīng)，因此需要進(jìn)行調(diào)整，這里可以使用CSS的媒體查詢(xún)或者JS查詢(xún)?cè)O(shè)備窗口大小均可，我才用的是媒體查詢(xún)：

CSS如下：

@media screen and (min-width:767px) {
    .modal-body>iframe{
        width:566px;
        height: 400px;;
    }       
}
@media screen and (max-width:766px) {
    .modal-body>iframe{
        width: 100%;
        height: 100%;    
    }          
}

這樣CSS就可以根據(jù)設(shè)備的窗口大小進(jìn)行調(diào)整iframe的大小.

模態(tài)框居中問(wèn)題解決方法：

同時(shí)，boostrap的視頻彈窗默認(rèn)是不居中的，我們要讓它居中顯示。因此，此處又用js首先查詢(xún)model是否為block，暨是否顯示，如果不顯示，就直接設(shè)置彈窗的高度為零。如果顯示，就計(jì)算它的上部空白高度為多少，應(yīng)該是整個(gè)屏幕的高度的一半減去模態(tài)框的高度的一半，然后設(shè)置margin-top的高度為計(jì)算出的結(jié)果。居中搞定。

視頻如何控制它播放和停止

由于iframe中插入的是外網(wǎng)的視頻，牽涉到跨域，所以我們無(wú)法在本地控制視頻，導(dǎo)致模態(tài)框已經(jīng)被X掉隱藏了，但是視頻仍然在后臺(tái)播放，也就是iframe仍在，這樣無(wú)疑會(huì)帶來(lái)問(wèn)題。網(wǎng)上給出的各種風(fēng)格的答案均嘗試了但是沒(méi)有效果，后來(lái)看到網(wǎng)上有將iframe的src屬性值設(shè)置為空的想法，然后受此啟發(fā)，想到了一個(gè)解決方案；代碼已經(jīng)在上面的JS 中貼上了，此處就不貼了，說(shuō)一下解決方案：首先是給模態(tài)框注冊(cè)點(diǎn)擊事件，然后再在點(diǎn)擊事件的回調(diào)函數(shù)中判斷模態(tài)框是否顯示，如果顯示，就給iframe 的src屬性賦值為空，這樣視頻沒(méi)有了地址就不會(huì)播放；如果模態(tài)框顯示，就給iframe的src屬性賦值為正確的視頻地址，這樣視頻就可以正常播放。此處涉及到為什么給模態(tài)框注冊(cè)點(diǎn)擊事件，因?yàn)閍標(biāo)簽的data-targert屬性的值就是模態(tài)框的id呀，所以給模態(tài)框注冊(cè)了點(diǎn)擊事件就相當(dāng)于給a標(biāo)簽注冊(cè)了點(diǎn)擊事件，而a標(biāo)簽就是預(yù)覽圖的父元素，所以，點(diǎn)擊a標(biāo)簽，就會(huì)觸發(fā)模態(tài)框的點(diǎn)擊事件

至此需求已經(jīng)解決，點(diǎn)擊預(yù)覽圖視頻播放，點(diǎn)擊X ，模態(tài)框消失且視頻停止，點(diǎn)擊視頻以外的區(qū)域，模態(tài)框消失且視頻停止，點(diǎn)擊視頻以?xún)?nèi)的區(qū)域，自帶播放器會(huì)暫停。