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动态地获取系统时间实现代码
May 24 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
js获取微信版本号的方法
May 12 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
JS实现多物体运动的方法详解
Jan 23 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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+MySQL的聊天室设计
2006/10/09 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Django框架表单操作实例分析
2019/11/04 Python
Django中modelform组件实例用法总结
2020/02/10 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
幼儿园校车司机的岗位职责
2014/01/30 职场文书
投标承诺书范本
2014/03/27 职场文书
贷款担保申请书
2014/05/20 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
清明节随笔
2015/08/15 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书