Javascript_Note.6

最新推荐文章于 2022-12-01 21:45:00 发布

voldem_rt

最新推荐文章于 2022-12-01 21:45:00 发布

阅读量296

点赞数

本文链接：https://blog.csdn.net/voldem/article/details/48105685

版权

Web学习同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

DIV+CSS布局

2 篇文章 0 订阅

订阅专栏

最近都在实习，可是发现自己老是以“我很累”为借口偷懒，技术博客没有写，手上的项目没有进展，个人的计划也没有落实，把时间浪费之后总是有种痛不欲生的感觉！希望大家多多批评吧。

下面是用简单JS结合HTML5的Video标签实现的，视频播放浮窗，但是还只是表面实现，有很多细节都不好，比如窗口缩小之后，视频还是在继续播放这样子的问题。代码简单易懂，新手朋友们我们一起加油！高手多多指点。

HTML主体部分：

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showhid(){  
	var tDiv = document.getElementById("btn_min");
	var cDiv = document.getElementById("video_cont");
	if(tDiv.className=="min"){
		cDiv.style.display="none";
		//tDiv.className='max';
	}
	else{
		cDiv.style.display="block";
		//tDiv.className='min';
	}
	tDiv.className = tDiv.className == 'min' ? 'max' : 'min';
  };
function closed(){  
    var mychar = document.getElementById("miaov_float_layer");
    mychar.style.display="none"
  };

</script>
</head>
<body>
	<div class="float_layer" id="miaov_float_layer" style="display:block">
		<h2>
			 视频播放
			<div id="btn_min" class="min" οnclick="showhid()" ></div>
			<div id="btn_close" class="close" οnclick="closed()"></div>
		</h2>
		<div class="content" id="video_cont" style="display:block">
				<video width="300" height="200" controls="controls">
				  <source src="video.mp4" type="video/mp4">
				  <source src="video.ogg" type="video/ogg">
					Your browser does not support the video tag.
				</video>	
		</div>
	</div>
</body>
</html>

CSS样式：

*{margin:0;padding:0;list-style-type:none;}
/* float_layer */
.float_layer{width:300px;border:1px solid #aaa;background:#000;position:fixed;left:0;bottom:0;}
.float_layer h2{height:25px;line-height:25px;padding-left:10px;font-size:14px;color:#333;background:url(images/title_bg.gif) repeat-x;border-bottom:1px solid #aaaaaa;position:relative;}
.float_layer .min{width:21px;height:20px;background:url(images/min.gif) no-repeat 0 bottom;position:absolute;top:2px;right:25px;}
.float_layer .min:hover{background:url(images/min.gif) no-repeat 0 0;}
.float_layer .max{width:21px;height:20px;background:url(images/max.gif) no-repeat 0 bottom;position:absolute;top:2px;right:25px;}
.float_layer .max:hover{background:url(images/max.gif) no-repeat 0 0;}
.float_layer .close{width:21px;height:20px;background:url(images/close.gif) no-repeat 0 bottom;position:absolute;top:2px;right:3px;}
.float_layer .close:hover{background:url(images/close.gif) no-repeat 0 0;}
.float_layer .content{height:200px;overflow:hidden;font-size:14px;line-height:18px;color:#666;}
.float_layer .wrap{padding:10px;}

css样式有参照别人的，仅供学习之用，谢谢！

下面是images文件下面的样式图片，也可以在下载频道下载本演示（视频播放浮窗）：