Bootstrap模態框插入視頻的示例分析

這篇文章給大家分享的是有關Bootstrap模態框插入視頻的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、效果

點擊模態框

跳出自己已做好的MP4等格式視頻

二、Bootstrap代碼

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模態框</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>

四、總代碼（我這里做了點改動，沒有放在button里，問題不大）

<a data-toggle="modal" data-target=".bs-example-modal-lg">模態框</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模態框插入視頻的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！