Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼
下面代碼實(shí)現(xiàn)別忘了前提是要在bootstrap框架下使用
效果
點(diǎn)擊模態(tài)框
跳出自己已做好的MP4等格式視頻
Bootstrap代碼
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模態(tài)框</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ...< --這里寫插入視頻代碼 -- > </div> </div> </div>
三、插入視頻代碼
注意video一些必要代碼。如需解決兼容可以看這篇博客http://blog.csdn.net/w_linux/article/details/62890202
<video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video>
四、總代碼(我這里做了點(diǎn)改動(dòng),沒有放在button里,問題不大)
<a data-toggle="modal" data-target=".bs-example-modal-lg">模態(tài)框</a> <!-- Large modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video> </div> </div> </div>
以上所述是小編給大家介紹的Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
相關(guān)文章
Javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊冒泡特效
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊冒泡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12javascript常見數(shù)字進(jìn)制轉(zhuǎn)換實(shí)例分析
這篇文章主要介紹了javascript常見數(shù)字進(jìn)制轉(zhuǎn)換,結(jié)合實(shí)例形式分析了JavaScript十進(jìn)制,十六進(jìn)制及二進(jìn)制的相互轉(zhuǎn)換原理與技巧,需要的朋友可以參考下2016-04-04JavaScript 實(shí)現(xiàn)完美兼容多瀏覽器的復(fù)制功能代碼
這兩天在做Web前端時(shí),遇到需求通過js實(shí)現(xiàn)文本復(fù)制的功能。經(jīng)過一番測試,終于實(shí)現(xiàn)了出來,有需要的小伙伴可以參考下。2015-04-04JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例
今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09