如下图所示:

 

 

 

 主要就是 给遮盖定位 .  但是有一个问题就是 video的高度不是固定的 . 如果 video 和 遮盖 在一个 父级div里, 无法确定位置, 如果用js效果不是很好.

 

思路:  video 和 遮盖不在一个div里:

 

 

 

html:

 1             <!-- 默认视频 -->
 2             <div class="defaultVideo">
 3                 <video controls>
 4                     <source src="../eypt_uploads/json01.mp4" type="video/mp4">
 5                     <source src="movie.ogg" type="video/ogg">
 6 
 7                 </video>
 8             </div>
 9             <div class="test">
10                 <div class="courseShadow">
11                     <span class="courseShadowCourseName">舞蹈鉴赏</span>
12                     <span class="courseShadowTeacher">刘健</span>
13                 </div>
14             </div>

 设置一个div.test 为 相对定位;  div.courseShadow 相对 div.test进行 绝对定位, 这里 的top 取 负值就可以了.

 

 

 

 

 

css:

 1     .defaultVideo video {
 2         width: 100%;
 3         /*height: auto;*/
 4         /*border: 1px solid black;*/
 5     }
 6 
 7 
 8     .test {
 9         position: relative;
10     }
11 
12     .courseShadow {
13         height: 80px;
14         width: 100%;
15         background-color: #D9D5D2;
16         opacity: 0.7;
17 
18         position: absolute;
19         left: 0px;
20         top: -80px;
21     }

注意 : 第 9行 , 和 第20行.

 

 

-----------------------------------------------------------------------------------------------------------------------

 

如果你是这样的html结构, 因为 video的高度自动增长的, 即使使用js ,也很难实现 定位.

 1             <!-- 默认视频 -->
 2             <div class="defaultVideo">
 3                 <video controls>
 4                     <source src="../eypt_uploads/json01.mp4" type="video/mp4">
 5                     <source src="movie.ogg" type="video/ogg">
 6 
 7                 </video>
 8                 <div class="courseShadow">
 9                     <span class="courseShadowCourseName">舞蹈鉴赏</span>
10                     <span class="courseShadowTeacher">刘健</span>
11                 </div>
12             </div>

 

 

 

 

 -----------------------------------------------------------------------------------------------------------

增加 鼠标移入和 移除事件:

 1     /**
 2      * [setCourseShadow 设置阴影的 显示 和隐藏]
 3      */
 4     function setCourseShadow()
 5     {
 6         $(".defaultVideo").mouseover(function(){
 7             $(".courseShadow").hide();
 8         }).mouseout(function(){
 9             $(".courseShadow").show();
10         });
11     }

 

 注意:这里 使用了 mouseover ,和 mouseout 是因为 这两个事件支持 冒泡 . 也就是说当鼠标 移入 或者 移除 div.defaultVideo 或者 div.defaultVideo的任意子元素,后代元素 时 ,事件都会发生.