Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼

更新時(shí)間：2017年06月25日 09:10:19 作者：XuLinJie_

這篇文章主要介紹了Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼,需要的朋友可以參考下

下面代碼實(shí)現(xiàn)別忘了前提是要在bootstrap框架下使用

效果

點(diǎn)擊模態(tài)框

這里寫(xiě)圖片描述

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

這里寫(xiě)圖片描述

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">
  ...< --這里寫(xiě)插入視頻代碼 -- >
 </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>

以上所述是小編給大家介紹的Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

相關(guān)文章

一文讀懂微信小程序頁(yè)面導(dǎo)航
微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文讀懂微信小程序頁(yè)面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下
2022-11-11
js實(shí)現(xiàn)圖片漂浮效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片漂浮效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片漂浮的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
這篇文章主要介紹了JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播相關(guān)對(duì)象定義、初始化及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-01-01
javascript常用方法總結(jié)
經(jīng)常使用的一些javascript方法，今天總結(jié)了一下，以便以后查詢(xún)，有需要的小伙伴可以參考下。
2015-05-05
js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法
這篇文章主要介紹了js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法,涉及鼠標(biāo)事件與隨機(jī)函數(shù)的使用技巧,需要的朋友可以參考下
2015-02-02
javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時(shí)彈出懸浮層效果
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時(shí)彈出懸浮層效果的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
區(qū)分中英文字符的兩種方法(正則和charCodeAt())
最近在為項(xiàng)目寫(xiě)登錄注冊(cè)系列頁(yè)面, 表單驗(yàn)證無(wú)疑是不可缺少的部分, 在這個(gè)jQ插件滿(mǎn)天飛的web年代, 表單驗(yàn)證倒也不是難事. 但再好的插件, 也并不能做到十全十美
2010-11-11
ES6新特性四：變量的解構(gòu)賦值實(shí)例
這篇文章主要介紹了ES6新特性之變量的解構(gòu)賦值操作,結(jié)合實(shí)例形式分析了ES6針對(duì)數(shù)組、對(duì)象等的解構(gòu)賦值操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
javascript 頁(yè)面劃詞搜索JS
這個(gè)腳本是網(wǎng)上的代碼修改的，兼容各主流瀏覽器，優(yōu)化頁(yè)面異步加載的文字的檢索提示框定位，根據(jù)選擇文字位置與屏幕尺寸計(jì)算檢索提示框定位。
2009-09-09
細(xì)說(shuō)webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下
2017-12-12