Bootstrap模态框插入视频的实现代码

更新时间：2017年06月25日 09:10:19 作者：XuLinJie_

这篇文章主要介绍了Bootstrap模态框插入视频的实现代码,需要的朋友可以参考下

下面代码实现别忘了前提是要在bootstrap框架下使用

一、效果

点击模态框

这里写图片描述

跳出自己已做好的MP4等格式视频

这里写图片描述

二、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简化代码 A=alert w=document.writeln
建议不要这样写代码,考虑以后的修改才是最重要的,代码分层.多把一个功能写成一个js代码或一个类,然后提供接口,这种写法代码会更多,速度也更慢,但人人都推荐这样写,是因为这样子维护方便.而程序不可能一次性写得完美的,永远都可以改进
2008-02-02
JavaScript中好用的解构用法详解
这篇文章主要为大家介绍了JavaScript中好用的解构用法操作示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
js FLASH幻灯片字符串中有连接符＆的处理方法
一般情况下我们在FLASH幻灯片字符串中有连接符时点击链接就会不正常，造成链接中的参数丢失，那么就需要用encodeURIComponent来对链接地址进行编码
2012-03-03
JavaScript同步与异步任务问题详解
这篇文章主要介绍了JavaScript事件循环同步任务与异步任务，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07
微信小程序sessionid不一致问题解决
这篇文章主要介绍了微信小程序sessionid不一致问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
javascript 如何生成不重复的随机数
javascript 如何生成不重复的随机数...
2007-11-11
bootstrap基础知识学习笔记
这篇文章主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js鼠标经过tab选项卡时实现切换延迟
这篇文章主要为大家详细介绍了js鼠标经过tab选项卡时实现切换延迟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JavaScript滚动轮播图制作原理详解
这篇文章主要为大家详细介绍了JavaScript滚动轮播图制作原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
JS判断字符串变量是否含有某个字串的实现方法
下面小编就为大家带来一篇JS判断字符串变量是否含有某个字串的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06