Bootstrap模態(tài)框插入視頻的示例分析

這篇文章給大家分享的是有關(guān)Bootstrap模態(tài)框插入視頻的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

一、效果

點(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)，沒(méi)有放在button里，問(wèn)題不大）

<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>

感謝各位的閱讀！關(guān)于“Bootstrap模態(tài)框插入視頻的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！