響應(yīng)式網(wǎng)站制作之響應(yīng)式視頻彈窗實(shí)現(xiàn)

2023-03-28    分類(lèi)： 響應(yīng)式網(wǎng)站

很多網(wǎng)站都有視頻播放的功能，有些視頻播放需要外鏈出去播放，不太影響網(wǎng)站的加載和網(wǎng)站的使用流量，有些則需要到本地播放，極大的影響了網(wǎng)站的加載和流量的使用，而有些網(wǎng)站還有一系列的視頻列表頁(yè)，這樣的情況就跟加嚴(yán)重了。
網(wǎng)站中有很多視頻且需要在本地播放時(shí)，網(wǎng)站往往同時(shí)加載很多和可能很大的視頻文件，怎么解決了？一般本地播放時(shí)都有一個(gè)視頻彈窗來(lái)播放視頻，視頻彈窗只有一個(gè)，而視頻文件卻有多個(gè)，在這里用視頻彈窗動(dòng)態(tài)的來(lái)加載視頻的地址了，當(dāng)需要播放某個(gè)視頻時(shí)點(diǎn)擊彈窗加載某個(gè)視頻，其余視頻不需要加載。

列表

圖1：
因?yàn)橐龅氖琼憫?yīng)式視頻列表，在這里使用了bootstrap插件的來(lái)完善列表和視頻彈窗的表現(xiàn)。

HTML代碼2

圖2：
看圖2可知每一項(xiàng)<li>上都有一個(gè)data-video屬性，這是用來(lái)存放視頻地址的。

HTML代碼3

圖3：
圖3視頻彈窗是不是少了個(gè)<source>標(biāo)簽，這是故意少的，我們需要通過(guò)js來(lái)增加進(jìn)去，同時(shí)也是把視頻加載進(jìn)去。

JS代碼1

圖4：
當(dāng)我們點(diǎn)擊視頻列表上的某一項(xiàng)時(shí)，通過(guò)js獲取到這一項(xiàng)的data-video的值，也就是視頻的地址，使用video_url來(lái)存放這一地址，用jq.html()方法去添加video標(biāo)簽下的<source>標(biāo)簽，從而拼接<source>標(biāo)簽的src屬性的地址，也就是video_url，這樣一個(gè)視頻彈窗就完成了。

實(shí)現(xiàn)效果1

圖5：

實(shí)現(xiàn)效果2

圖6：

網(wǎng)站標(biāo)題：響應(yīng)式網(wǎng)站制作之響應(yīng)式視頻彈窗實(shí)現(xiàn)
路徑分享：http://www.muchs.cn/news1/248401.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作、響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司