zoukankan      html  css  js  c++  java
  • JQPlug0004:layer 打开 type 1 弹出视频 弹出链接

    1,

            /* 设置layer背景透明 */
            .shadows{background-color: transparent !important;box-shadow: 0 0 0 rgba(0,0,0,0) !important;}

    确保弹窗视频上下居中

        vcr = "hotdemo/video/video/aboutesun.mp4";
        vidwid = document.body.offsetWidth * 0.7 + "px";
        // 视频居中的上偏移百分比
        offhig = ((1 - ((document.body.offsetWidth * 0.7 * 0.56) / document.body.offsetHeight))/2)*100;
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1, //显示关闭按钮
            shade: 0.7,
            border: 0,
            skin: 'shadows',
            // area: ['658px', '356px'], //会出现滚动条
            area: vidwid, // 这样写area可以确保不会出现滚动条
            anim: 0,
            scrollbar: false, //防止父页面自动跳到页面顶端
            offset: '' + offhig + '%', // 上下偏移
            // 播放视频
            content: '<div style="line-height:0; overflow: hidden;"><video id="vidsen1hot1" width="100%" height="100%" controlsList="nodownload" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
            // 打开链接
            // content: '<iframe name="IF0" id="IF0" class="IF0" src="hotdemo/zhiboImg/index.html" width="100%" height="' + vidhig + '" scrolling="no" frameborder="no" allowtransparency="yes" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-forms allow-popups allow-scripts"></iframe>'
        });
        // content 中 div标签中 line-height:0; 可以去掉视频底部的白边
        //去掉视频播放工具栏中的下载全屏等功能 controlslist="nodownload  nofullscreen noremoteplayback"
        //去掉默认视频播放栏中的 画中画 功能
        $('#vidsen1hot1')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true
        vcr = "https://www.esun3dai.com/Test/maotai.mp4";
        vidwid = document.body.offsetWidth * 0.8 + "px";
        vidhig = document.body.offsetWidth * 0.8 * 0.55 + "px";
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1, //显示关闭按钮
            shade: 0.7,
            border: 0,
            skin: 'shadows',
            // area: ['658px', '356px'], //会出现滚动条
            area: vidwid, // 这样写area可以确保不会出现滚动条
            anim: 0,
            scrollbar: false, //防止父页面自动跳到页面顶端
            // 播放视频
            // content: '<div style="line-height:0;"><video id="vid1" width="100%" height="100%" controlsList="nodownload" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
            // 打开链接
            content: '<iframe name="IF0" id="IF0" class="IF0" src="hotdemo/zhiboImg/index.html" width="100%" height="' + vidhig + '" scrolling="no" frameborder="no" allowtransparency="yes" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-forms allow-popups allow-scripts"></iframe>'
        });
    
        // content 中 div标签中 line-height:0; 可以去掉视频底部的白边
        //去掉视频播放工具栏中的下载全屏等功能 controlslist="nodownload  nofullscreen noremoteplayback"
        //去掉默认视频播放栏中的 画中画 功能
        // $('#vid1')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true
    琥珀君的博客
  • 相关阅读:
    oracle报ORA-00911:invalid character
    转: ㊣华哥日记㊣ 12.14-如何去了解更多的东西
    App竞品技术分析 (3)减小安装包的体积(转)
    ***apache做301重定向的方法
    .htaccess是什么?.htaccess几个简单应用
    一个网页如何决定是当前页打开还是新窗口打开?
    响应式web设计之CSS3 Media Queries
    ***CSS魔法堂:选择器及其优先级
    Bootstrap3 为何无法显示Glyphicons 图标
    MySQL中tinytext、text、mediumtext和longtext详解
  • 原文地址:https://www.cnblogs.com/eliteboy/p/13932881.html
Copyright © 2011-2022 走看看