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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
jquery 笔记 事件
Nov 02 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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/02/24 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
Javascript中replace()小结
2015/09/30 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python复制与引用用法分析
2015/04/08 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
实习自我评价怎么写
2013/12/02 职场文书
精彩自我鉴定
2014/01/16 职场文书
四年级下册教学反思
2014/02/01 职场文书
人事任命通知书
2015/04/21 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
心术观后感
2015/06/11 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Go 内联优化让程序员爱不释手
2022/06/21 Golang