脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 模态框插入视频

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模态框插入视频的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

相关文章

  • 一文读懂微信小程序页面导航

    一文读懂微信小程序页面导航

    微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,下面这篇文章主要给大家介绍了关于如何通过一文读懂微信小程序页面导航的相关资料,需要的朋友可以参考下
    2022-11-11
  • js实现图片漂浮效果的方法

    js实现图片漂浮效果的方法

    这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript基于面向对象实现的无缝滚动轮播示例

    JavaScript基于面向对象实现的无缝滚动轮播示例

    这篇文章主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下
    2020-01-01
  • javascript常用方法总结

    javascript常用方法总结

    经常使用的一些javascript方法，今天总结了一下，以便以后查询，有需要的小伙伴可以参考下。
    2015-05-05
  • js鼠标点击图片实现随机变换图片的方法

    js鼠标点击图片实现随机变换图片的方法

    这篇文章主要介绍了js鼠标点击图片实现随机变换图片的方法,涉及鼠标事件与随机函数的使用技巧,需要的朋友可以参考下
    2015-02-02
  • javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

    javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

    这篇文章主要为大家详细介绍了javaScript实现鼠标在文字上悬浮时弹出悬浮层效果的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-03-03
  • 区分中英文字符的两种方法(正则和charCodeAt())

    区分中英文字符的两种方法(正则和charCodeAt())

    最近在为项目写登录注册系列页面, 表单验证无疑是不可缺少的部分, 在这个jQ插件满天飞的web年代, 表单验证倒也不是难事. 但再好的插件, 也并不能做到十全十美
    2010-11-11
  • ES6新特性四：变量的解构赋值实例

    ES6新特性四：变量的解构赋值实例

    这篇文章主要介绍了ES6新特性之变量的解构赋值操作,结合实例形式分析了ES6针对数组、对象等的解构赋值操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • javascript 页面划词搜索JS

    javascript 页面划词搜索JS

    这个脚本是网上的代码修改的，兼容各主流浏览器，优化页面异步加载的文字的检索提示框定位，根据选择文字位置与屏幕尺寸计算检索提示框定位。
    2009-09-09
  • 细说webpack源码之compile流程-入口函数run

    细说webpack源码之compile流程-入口函数run

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。这篇文章主要介绍了webpack源码之compile流程-入口函数run,需要的朋友可以参考下
    2017-12-12

最新评论