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
    琥珀君的博客
  • 相关阅读:
    免备案 国外服务器 vps 推荐以及优惠码
    VSCode 实时预览 HTML 页面
    VPS 上安装 Nginx 就是这么简单
    Thinkphp 5 验证码无法正常显示的排错以及解决方案 【已解决】
    Composer 安装 topthink/think-captcha 时报错 requires topthink/framework ^6.0.0 【已解决】
    Linux ps命令
    MySQL 查询不区分大小写的问题以及编码格式问题
    Cyberduck 小黄鸭 跨平台的 FTP 软件
    MySQL 存储过程 详解
    php 四舍五入保留两位小数,自动补齐0
  • 原文地址:https://www.cnblogs.com/eliteboy/p/13932881.html
Copyright © 2011-2022 走看看