首頁  >  文章  >  web前端  >  分享Bootstrap模態框插入影片的實例程式碼

分享Bootstrap模態框插入影片的實例程式碼

PHPz
PHPz原創
2017-06-27 15:27:044873瀏覽

這篇文章主要介紹了Bootstrap模態框插入視頻的實現代碼,需要的朋友可以參考下Bootstrap教程

下面代碼實現別忘了前提是要在bootstrap框架下使用

一、效果

點擊模態框

分享Bootstrap模態框插入影片的實例程式碼

跳出自己已做好的MP4等格式影片

分享Bootstrap模態框插入影片的實例程式碼

二、Bootstrap程式碼


#
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button>

<p class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <p class="modal-dialog modal-lg" role="document">
 <p class="modal-content">
  ...< --这里写插入视频代码 -- >
 </p>
 </p>
</p>

三、插入影片程式碼

##注意video一些必要程式碼。如需解決相容可以看這篇部落格http://blog.csdn.net/w_

linux/article/details/62890202


 <video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video>

四、總程式碼(我這裡做了點改動,沒有放在button裡,問題不大)


模态框
 

 

以上是分享Bootstrap模態框插入影片的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn