客户咨询热线 15081754822
首页     关于我们     网站建设     系统开发     手机网站     模板网站     网站改版     网站维护     Logo设计     短信群发     企业邮箱     网站案例     微信开发     建站知识     解决方案     联系我们
 您现在的位置:首页 > 视频播放列表功能  
业务范围
  系统开发
  网站建设
  手机网站
  网站案例
  域名注册
  短信群发
  企业邮箱
建站专题
  邯郸县区建站
  建站解决方案
关于我们
  关于我们
  公司视频
  联系方式
 
 
 
 
 
 
  视频播放列表功能


视频播放列表功能
发布日期:2020-1-11 9:18:04  浏览次数:152次   二维码分享
    <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>

作者:未知
来源:互联网 下一条: js实现更换背景图片
关于我们 | 最新动态 | 网站案例 | 联系方式
网站关键词:邯郸网站建设 | 邯郸做网站 | 邯郸网站设计 | 邯郸网页设计 | 邯郸网站制作 | 邯郸网络公司| 邯郸网站推广
客服电话:156-9004-3855 QQ:125856421 电子信箱:125856421@QQ.com
邯郸奥科网络 版权所有
客户服务
15102693855