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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
webpack将js打包后的map文件详解
Feb 22 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实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
js tab效果的实现代码
2009/12/26 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
完善的jquery处理机制
2016/02/21 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
python抓取最新博客内容并生成Rss
2015/05/17 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
django如何实现视图重定向
2019/07/24 Python
Python PIL图片添加字体的例子
2019/08/22 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
经理职责范文
2013/11/08 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
《钱学森》听课反思
2014/03/01 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
小英雄雨来观后感
2015/06/09 职场文书