Bootstrap图片中加播放按钮

1、效果图

2、代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap图片中加播放按钮</title><!-- Bootstrap --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script><style></style>
</head>
<body><div><div style="padding-left:300px;"><h3>观看视频</h3></div><p style="position:relative;"><img onclick="seeVideo()" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1181062145,1954327019&fm=26&gp=0.jpg"  style="height:400px;width:760px;border-radius: 10px;" alt=""/><span onclick="seeVideo()" class="glyphicon glyphicon-play-circle" style="height: 80px;width: 80px;position: absolute;left: 340px;top: 160px;font-size: 80px;color: #fff;"></span></p></div><!-- 视频观看的DIV START--><div class="modal fade" id="modal_id" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content" style="height:550px;width:700px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 id="chapter_title">标题</h4></div><div class="modal-body"><video id="backPlay_id" style="height:450px;width:660px" src="" controls="controls"></video></div></div><div class="modal-footer"><!-- <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button><button class="btn btn-primary" type="button" data-dismiss="modal">Proceed</button> --></div></div></div><!-- 视频观看的DIV END-->
</body>
<script>//弹出视频框function seeVideo(){$("h4#chapter_title").text('动态显示视频的标题');       //设置标题$('#backPlay_id').attr('src', 'http://d.itheima.com:81//dd/Python/Scrapy%E7%88%AC%E8%99%AB%E6%A1%86%E6%9E%B6/00.Scrapy%E6%9E%B6%E6%9E%84%E6%B5%81%E7%A8%8B%E4%BB%8B%E7%BB%8D.mp4');//设置视频地址$('#modal_id').modal('show');//显示出弹出层}
</script>
</html>

Bootstrap图片中加播放按钮相关推荐

在图片上加播放按钮示例代码
重点:大家都知道relative是相对定位,absolute是绝对定位,他们的单一用法我们非常熟悉,但是,怎样让某个元素在他的父级块中决对定位呢,答案就是relative+absolute.absol ...
Flash：关键帧中调用自建的音乐类，进行播放、关闭、循环音乐+按键播放或者关闭外部音乐+循环播放背景音乐+播放按钮音乐+停止+加载外部音乐文件+AS2播放背景音乐
目录一.关键帧里面:调用自建的音乐类, 循环播放外部音乐.进行播放.关闭.循环音乐 1.代码:自建音乐类 2.关键帧中创建.播放.暂停背景音乐+按钮音乐 3.文件布置二.关键帧中:按键播放或者关闭 ...
netflix_Netflix播放按钮剖析
netflix We will develop a play pause button similar to the one the Netflix video player has. 我们将开发一个 ...
django：bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
爱奇艺播放按钮动画解析
一.动画过程分析 1.拆分动画正常动画效果如下: 操作现象结论放慢动画这个效果可以反复多看几次,观察一下这个动画是由那几部分组成的,然后再往下看添加辅助颜色可以看出,整个动画有四部分组成 ...
根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
html5 video 播放按钮缩小,【Web前端问题】video在手机端封面有一个很大的播放按钮怎么去掉...
这个播放按钮怎么去掉好别扭啊回答: `video::-webkit-media-controls-start-playback-button { display: none; }` 不用video控 ...
html video在手机上按钮位置问题,【前端】video在手机端封面有一个很大的播放按钮怎么去掉...
这个播放按钮怎么去掉好别扭啊回答 `video::-webkit-media-controls-start-playback-button { display: none; }` 不用video控件 ...
踩坑，小程序audio组件播放不显示播放按钮
研究了大半天也没整明白为什么会影响到播放按钮的加载-- 原因:设置播放src时同步执行了播放解决:先执行完setdata{src},延时100ms再执行播放 this.audioCtx.setSrc ...
Bootstrap之表格，按钮，表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...

Bootstrap图片中加播放按钮

Bootstrap图片中加播放按钮相关推荐

最新文章

热门文章