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 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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魔术变量用法实例详解
2014/11/13 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
人工神经网络算法知识点总结
2019/06/11 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python pillow库的基础使用教程
2021/01/13 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
Lucene推荐的分页方式是什么?
2015/12/07 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
公证委托书模板
2014/04/03 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
接收函格式
2015/01/30 职场文书
叶问观后感
2015/06/15 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
MySQL update set 和 and的区别
2021/05/08 MySQL