国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

vpants / 2913人閱讀

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

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

引用的庫
需要用的有：jQuery, boostrap框架.

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

JS 如下：

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

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è)備的窗口大小進行調(diào)整iframe的大小.

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112765.html

相關(guān)文章

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

    摘要：因此，此處又用首先查詢是否為，暨是否顯示，如果不顯示，就直接設(shè)置彈窗的高度為零。 由于在視頻專題頁項目中需要鏈接騰訊視頻，然后再在網(wǎng)頁端以彈窗的形式展現(xiàn)，且需要彈窗顯示時候視頻播放，彈窗關(guān)閉時候視頻停止，在之前的查閱資料中看到很多案例都說的不是很清晰，今天在經(jīng)過多次嘗試后終于成功了，分享一下，代碼如下： 引用的庫需要用的有：jQuery, boostrap框架. HTML 結(jié)構(gòu)如下 ...

    joyvw 評論0 收藏0

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

    摘要：因此，此處又用首先查詢是否為，暨是否顯示，如果不顯示，就直接設(shè)置彈窗的高度為零。 由于在視頻專題頁項目中需要鏈接騰訊視頻，然后再在網(wǎng)頁端以彈窗的形式展現(xiàn)，且需要彈窗顯示時候視頻播放，彈窗關(guān)閉時候視頻停止，在之前的查閱資料中看到很多案例都說的不是很清晰，今天在經(jīng)過多次嘗試后終于成功了，分享一下，代碼如下： 引用的庫需要用的有：jQuery, boostrap框架. HTML 結(jié)構(gòu)如下 ...

    whataa 評論0 收藏0

  • Win10應(yīng)用設(shè)計的那些事兒

    摘要：如何挑選合適的導(dǎo)航結(jié)構(gòu)導(dǎo)航設(shè)計是應(yīng)用設(shè)計的關(guān)鍵，設(shè)計規(guī)范以下簡稱規(guī)范中將導(dǎo)航元素分為對等層次和歷史導(dǎo)航等幾類，例如表和透視表導(dǎo)航窗格是對等導(dǎo)航元素，中心大綱細節(jié)屬于分層導(dǎo)航元素，返回則屬于歷史導(dǎo)航元素。 此文已由作者楊凱明授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗。 繼Windows 10系統(tǒng)發(fā)布之后，很多Windows用戶更新了系統(tǒng)。win10系統(tǒng)的發(fā)布，...

    ad6623 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    li21 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<