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+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
node使用request请求的方法
Dec 20 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
React实现todolist功能
Dec 28 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
理解Python中的类与实例
2015/04/27 Python
解析Python编程中的包结构
2015/10/25 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
C语言50道问题
2014/10/23 面试题
2014年开学第一课活动方案
2014/03/06 职场文书
世博会口号
2014/06/20 职场文书
党员个人公开承诺书
2014/08/29 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
管辖权异议上诉状
2015/05/23 职场文书