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 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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 八种基本的数据类型小结
2011/06/01 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
vue.js 微信支付前端代码分享
2018/02/10 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python字符编码判断方法分析
2016/07/01 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
浅析python的Lambda表达式
2019/02/27 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
高中生学期学习自我评价
2014/02/24 职场文书
疾病防治方案
2014/05/31 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
委托培训协议书
2014/11/17 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
学前教育见习总结
2015/06/23 职场文书