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
    琥珀君的博客
  • 相关阅读:
    6.4 记录
    Python向mysql数据库插入数据
    6.2号课下作业测试标准的好坏
    模糊查询
    日常开发问题解决
    日常开发问题解决
    tomcat容器启动失败疑难问题解决方案
    5.14 记录
    5.13 记录
    关于HTTP,TCP,IP的一些基础知识
  • 原文地址:https://www.cnblogs.com/eliteboy/p/13932881.html
Copyright © 2011-2022 走看看