客户咨询热线 15081754822 15102693855
首页     在线斗牛牌游戏     网站扶植     体系开辟     手机网站     模板网站     网站改版     网站保护     域名注册     短信群发     企业邮箱     网站案例     微信开辟     建站知识     处理筹划     接洽我们
 您如今的地位:首页 > 视频播放列表功能  
营业范围
  体系开辟
  网站扶植
  手机网站
  网站案例
  域名注册
  短信群发
  企业邮箱
建站专题
  邯郸县区建站
  建站处理筹划
在线斗牛牌游戏
  在线斗牛牌游戏
  公司视频
  接洽方法
 
 
 
 
 
 
  视频播放列表功能


视频播放列表功能
发布日期:2020-1-11 9:18:04  浏览次数:75次   二维码分享
    <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完成改换背景图片
在线斗牛牌游戏 | 最新静态 | 网站案例 | 接洽方法
网站关键词:邯郸网站扶植 | 邯郸做网站 | 邯郸网站设计 | 邯郸网页设计 | 邯郸网站制造 | 邯郸搜集公司| 邯郸网站推行
客服德律风:15102693855 QQ:125856421 电子信箱:125856421@QQ.com
邯郸奥科搜集 版权一切
客户办事
15102693855