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

whataa 發布于2019-08-01 18:03 / 2644人閱讀

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

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

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

HTML 結構如下

                    

                        
                            
                        
                        
                            
                                
                                    
                                        
                                        Modal title

JS 如下：

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

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就可以根據設備的窗口大小進行調整iframe的大小.

模態框居中問題解決方法：

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

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

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

至此需求已經解決，點擊預覽圖視頻播放，點擊X ，模態框消失且視頻停止，點擊視頻以外的區域，模態框消失且視頻停止，點擊視頻以內的區域，自帶播放器會暫停。

云服務器 GPU云服務器移動端自適應 asp頁面自適應 js頁面高度自適應 java 在頁面彈窗

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51547.html

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

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

joyvw 2019-08-21 17:43 評論0 收藏0
在移動和PC自適應頁面做視頻彈窗控制小案例

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

vpants 2019-08-29 13:52 評論0 收藏0
Win10應用設計的那些事兒

摘要：如何挑選合適的導航結構導航設計是應用設計的關鍵，設計規范以下簡稱規范中將導航元素分為對等層次和歷史導航等幾類，例如表和透視表導航窗格是對等導航元素，中心大綱細節屬于分層導航元素，返回則屬于歷史導航元素。此文已由作者楊凱明授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。繼Windows 10系統發布之后，很多Windows用戶更新了系統。win10系統的發布，...

ad6623 2019-06-28 11:00 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

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

li21 2019-08-23 17:11 評論0 收藏0