Javascript_Note.6

来源：互联网发布：开微店用什么软件好编辑：程序博客网时间：2024/06/05 07:33

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

下面是用简单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" onclick="showhid()" ></div><div id="btn_close" class="close" onclick="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文件下面的样式图片，也可以在下载频道下载本演示（视频播放浮窗）：

最后效果：

缩小后：

0 0