Bootstrap模态框插入视频的实现代码


Posted in Javascript onJune 25, 2017

下面代码实现别忘了前提是要在bootstrap框架下使用

一、效果

点击模态框

Bootstrap模态框插入视频的实现代码

跳出自己已做好的MP4等格式视频

Bootstrap模态框插入视频的实现代码

二、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模态框插入视频的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
jquery 选取方法都有哪些
May 18 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
Angular中的interceptors拦截器
Jun 25 #Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 #Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 #Javascript
Angular2.js实现表单验证详解
Jun 23 #Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
You might like
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
php判断目录存在的简单方法
2019/09/26 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python获取服务器响应cookie的实例
2018/12/28 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
详解python中的index函数用法
2019/08/06 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
后勤人员岗位职责
2013/12/17 职场文书
初中化学教学反思
2016/02/22 职场文书