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

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

PHPz
發布: 2018-10-13 16:57:41
原創
4918 人瀏覽過

這篇文章主要介紹了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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板