js生成video，并添加关闭按钮和拖动功能。

最新推荐文章于 2024-08-15 17:55:44 发布
GISer_CV攻城狮
最新推荐文章于 2024-08-15 17:55:44 发布
阅读量2.3k
点赞数
分类专栏： JavaScript
本文链接：https://blog.csdn.net/weixin_44011559/article/details/111174256
版权
JavaScript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <button onclick="playV(this)" id='" + feature.attributes.轨迹ID + "' style="background: blueviolet; height: 30px;width: 150px;">点击弹出视频</button>
</body>

</html>
<script>
    window.playV = function(obj) {
        var photoUrl = "https://haokan.baidu.com/v?pd=wisenatural&vid=4643485291445192865";
        var div = document.createElement('div');
        div.style.cssText = "position:absolute; z-index:998;top:0";
        div.style.width = "320px";
        div.style.height = "220px";
        div.style.background = "blue";
        div.style.margin = "0 auto";
        div.className = "divMax";
        div.id = "idOuterDiv";

        var btn = document.createElement("button");
        btn.style.cssText = "position:absolute; z-index:1000;top:0";
        btn.style.right = "0px";
        btn.style.width = "50px";
        btn.style.height = "30px";
        btn.style.background = "red";
        btn.className = "closeVid";
        btn.innerText = "X";

        var x = document.createElement("VIDEO");
        x.style.cssText = "position:absolute; z-index:999; top:0";
        x.setAttribute("type", "video/mp4");
        x.setAttribute("width", "320");
        x.setAttribute("height", "220");
        x.setAttribute("controls", "controls");
        x.setAttribute("src", photoUrl);

        div.appendChild(x);
        div.appendChild(btn);
        document.body.appendChild(div);
        //不要jQuery和原生js混合使用 Uncaught TypeError: Cannot set property ‘display‘ of undefined
        $(".closeVid ").click(function() {
            $(".divMax ").hide();
        });
        //拖动视频
        function dragFunc(id) {
            var Drag = document.getElementById(id);
            Drag.onmousedown = function(event) {
                var ev = event || window.event;
                event.stopPropagation();
                var disX = ev.clientX - Drag.offsetLeft;
                var disY = ev.clientY - Drag.offsetTop;
                document.onmousemove = function(event) {
                    var ev = event || window.event;
                    Drag.style.left = ev.clientX - disX + "px ";
                    Drag.style.top = ev.clientY - disY + "px ";
                    Drag.style.cursor = "move ";
                };
            };
            Drag.onmouseup = function() {
                document.onmousemove = null;
                this.style.cursor = "default ";
            };
        };
        dragFunc("idOuterDiv");
    };
</script>

<script>
    //拖动属性窗口
    (function($) {
        $.fn.dragDiv = function(divWrap) {
            return this.each(function() {
                var $divMove = $(this); //鼠标可拖拽区域
                var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove; //整个移动区域
                var mX = 0,
                    mY = 0; //定义鼠标X轴Y轴
                var dX = 0,
                    dY = 0; //定义div左、上位置
                var isDown = false; //mousedown标记
                if (document.attachEvent) { //ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
                    $divMove[0].attachEvent('onselectstart', function() {
                        return false;
                    });
                }
                $divMove.mousedown(function(event) {
                    var event = event || window.event;
                    mX = event.clientX;
                    mY = event.clientY;
                    dX = $divWrap.offset().left;
                    dY = $divWrap.offset().top;
                    isDown = true; //鼠标拖拽启动
                });
                $(document).mousemove(function(event) {
                    var event = event || window.event;
                    var x = event.clientX; //鼠标滑动时的X轴
                    var y = event.clientY; //鼠标滑动时的Y轴
                    if (isDown) {
                        $divWrap.css({
                            "left": x - mX + dX,
                            "top": y - mY + dY
                        }); //div动态位置赋值
                    }
                });
                $divMove.mouseup(function() {
                    isDown = false; //鼠标拖拽结束
                });
            });
        };
    })(jQuery);
    $(".idOute").dragDiv(".idOute0");
</script>

//自定义弹框
<script>
    //window.alert = alert;
    //var btn = document.getElementById("aaa ");
    document.getElementById("aaa ").onclick = function() {
        alert('没有视频', function() {});
    };
    //自定义弹框
    function alert(data, callback) {
        var alert_bg = document.createElement('div');
        var alert_box = document.createElement('div');
        var alert_text = document.createElement('div');
        var alert_btn = document.createElement('div');
        var textNode = document.createTextNode(data ? data : '');
        var btnText = document.createTextNode("确定 ");
        //Control style
        css(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'z-index': '999999999'
        });
        css(alert_box, {
            'width': '270px',
            'max-width': '90%',
            'font-size': '16px',
            'text-align': 'center',
            'background-color': '#fff',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });
        css(alert_text, {
            'padding': '10px 15px',
            'border-bottom': '1px solid #ddd'
        });
        css(alert_btn, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer'
        });
        alert_text.appendChild(textNode);
        alert_btn.appendChild(btnText);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn);
        alert_bg.appendChild(alert_box);
        document.getElementsByTagName('body')[0].appendChild(alert_bg);
        alert_btn.onclick = function() {
            alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callback === 'function') {
                callback();
            }
        }

        function css(targetObj, cssObj) {
            var str = targetObj.getAttribute("style ") ? targetObj.getAttribute('style') : '';
            for (var i in cssObj) {
                str += i + ':' + cssObj[i] + ';';
            }
            targetObj.style.cssText = str;
        }
    }
</script>
注意：
元素的position要设置为：absolute;
在这里插入图片描述