Bootstrap图片中加播放按钮

最新推荐文章于 2022-12-28 17:15:52 发布

夏已微凉、

最新推荐文章于 2022-12-28 17:15:52 发布

阅读量1.9k

点赞数 7

分类专栏： # Bootstrap

本文链接：https://blog.csdn.net/qq_36025814/article/details/83573040

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>