zoukankan      html  css  js  c++  java
  • 弹框播放腾讯视频(Iframe)

    <img src="{*Pic}" alt="" onclick="palyabout('v1','iframe的src链接')">
    <style> 
    .videoss {
    100%; margin: 0 auto; padding-top: 5%; } .videomains { position: fixed; top: 10rem; left: 16%; z-index: 10; display: none; } .XXX { 100%; height: 100%; background: black; position: fixed; top: 0; left: 0; z-index: 9; opacity: 0.1; display: none; } .iframe { 300%; height:400px; } </style>
    <script src="js/layer/layer.js"></script> 
    <script> 
    function palyabout(data,paths) {
        if(paths=="") {
        layer.msg("暂无视频!");
        return false;
    }
    $("#Video1").attr("src",paths);
        $(".txp_tipbar").attr("style","display:none");
        if (data == "v1") {
        $(".videomains").css("display", "block");
        $(".XXX").css("display", "block");
        $("#Video1").css("display", "block");
        $("#Video1")[0].play()
    }
    } $(".XXX").click(function () {
        document.getElementById("Video1").pause();
        $(".videomains").css("display", "none");
        $(".XXX").css("display", "none");
        $("#Video1").css("display", "none");
    }
    );
        function closevideo() {
        $(".videomains").css("display", "none");
        $(".XXX").css("display", "none");
        $("#Video1").css("display", "none");
    }
    </script>
    <div class="XXX" onclick="closevideo()"></div>
    <div class="videomains">
        <iframe frameborder="0" src="" allowFullScreen="true" class="iframe" id="Video1" ></iframe>
        <!-- <video  src="" controls class="videoss" id="Video1" />-->//设置本地视频src路径 播放
    </div>
  • 相关阅读:
    npm切换淘宝镜像
    Linux下安装Node.js环境
    Electron入门
    Grunt实现前端自动化
    Javascript代码复审(review)
    Eclipse启动Tomcat报错:Could not load the Tomcat server configuration at Servers2Tomcat v8.0 Server at localhost-config
    maven常用命令
    Element form表单验证无法生效
    css 绝对定位参考对象
    vscode 不识别 less代码
  • 原文地址:https://www.cnblogs.com/zpblogs/p/10188937.html
Copyright © 2011-2022 走看看