|
|
 视频播放列表功能 |
| 视频播放列表功能 |
| 发布日期：2020-1-11 9:18:04 浏览次数：977次 二维码分享
|
|
|
<div class="pop-video">
<div class="cont">
<div class="title">
<span class="close"></span>
<h4>培华教育</h4>
</div>
<iframe class="video" id="video" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>
</div>
<ul class="gwxlist">
<li>
<p>跟我学-数学基础第1讲</p>
<a class="btn vplay" href="javascript:;" data-title="跟我学-数学基础第1讲" data-url="https://v.qq.com/txp/iframe/player.html?vid=v0876i40w52">试听</a>
</li>
<li>
<p>跟我学-数学基础第2讲</p>
<a class="btn vplay" href="javascript:;" data-title="跟我学-数学基础第2讲" data-url="https://v.qq.com/txp/iframe/player.html?vid=y0876unid1z">试听</a>
</li>
</ul>
<!-- 视频弹窗-end -->
<script language="javascript">
//弹出视频播放
$('.vplay').click(function(){
$('.pop-video h4').html($(this).data('title'));
$('#video').attr('src',$(this).data('url'));
$('.pop-video').fadeIn();
$('#video').trigger('play');
})
$('.pop-video .close').click(function(){
$('#video').attr('src','');
$(this).parents('.pop-video').fadeOut();
$('#video').trigger('pause');
})
</script>
<style type="text/css">
.vplay
{
border: 1px solid #c82034;
color: #c82034;
border-radius: 5px;
height: 30px;
line-height: 30px;
width: 60px;
text-align: center;
}
/*视频弹窗*/
.pop-video{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99;background-color:rgba(0,0,0,.8);}
.pop-video .cont{position: absolute;top:50%;left:50%;width:100%;max-width:700px;-webkit-transform:translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.pop-video .video{width:100%;height:410px;}
.pop-video .title{position:absolute;top:0;left:0;width:100%;line-height:40px;padding:0 20px;}
.pop-video .title h4{color:#fff;font-weight: normal;font-size:18px; padding:10px;}
.pop-video .close{position:absolute;top:10px;right:5px;width:40px;height:40px;background:url(images/play-close.png) no-repeat center center;cursor:pointer;z-index:2;}
</style>
|
| 作者：邯郸网站制作 |
上一条: CSS实现鼠标放上去图片翻转效果实现
|
| 来源：互联网 |
下一条: js实现更换背景图片
|
|
|
