javascript - 这种效果是怎么实现的

Question

http://www.5pao.com/ 很好奇右下角的视频讲解是怎么实现的，是一个类似播放器的东东，可拖动，最主要的视频的背景是透明的。他们是怎么做到的呢。

Answer 1

有人说过flash 不能透明吗？？
就是一个 flash 盖在页面上

Answer 2

<p id="XK_Container" style="width: 400px; left: 157px; top: 114px;"><object type="application/x-shockwave-flash" data="http://www.5pao.com/js/flv/player.swf?ver=0" width="400" height="500" id="xkFlashObject" style="visibility: visible;"><param name="align" value="tl"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="quality" value="best"><param name="scale" value="noscale"></object><p id="XK_Controller" style="width: 150px; right: 0px; bottom: 30px; display: none;"><p class="thleft"></p><p class="thindex"><ul><li><a id="XK_Controller_Play" class="pause" href="javascript:void(0)"></a></li><li><a id="XK_Controller_Stop" class="stop" href="javascript:void(0)"></a></li><li><a id="XK_Controller_Mute" class="voice" href="javascript:void(0)"></a></li><li><a id="XK_Controller_Close" title="" class="close" href="javascript:void(0)"></a></li></ul></p><p class="thright"></p></p></p>

透明：

<param name="wmode" value="transparent">

拖動：

style="width: 400px; left: 157px; top: 114px;"

以及

#XK_Container {
    font-size: 12px;
    z-index: 9999;
    position: fixed;
    _position: fixed;
    text-align: left;
    overflow: visible;
    width: 150px;
}

關鍵 JS:

Player.event.drag.prototype = {
    start: function (b, c) {
        this.mode = c;
        this.width = this.$target.width();
        this.height = this.$target.height();
        this.border = this.$target.offset();
        this.border.right = this.border.left + this.width;
        this.border.bottom = this.border.top + this.height;
        this.$parent.mousemove(this.handlers[this.mode]).mouseup(this.handlers.complete);
        this.bound = {
            left: this.parentOffset_left,
            top: this.parentOffset_top,
            right: this.parentOffset_left + XK.$(window).width() + this.$parent.scrollLeft(),
            bottom: this.parentOffset_top + XK.$(window).height() + this.$parent.scrollTop()
        };
        this.scheduleEvent = new Player.eventScheduler();
        if (b.preventDefault) {
            b.preventDefault()
        } else {
            b.returnValue = false
        }
        if (b.stopPropagation) {
            b.stopPropagation()
        } else {
            b.cancelBubble = true
        }
    },
    stop: function (b) {
        this.$parent.unbind("mousemove", this.handlers[this.mode]);
        this.$parent.unbind("mouseup", this.handlers.complete);
        if (this.target.releaseCapture) {
            this.target.releaseCapture()
        } else {
            if (window.releaseEvents) {
                window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP)
            }
        }

        return false
    },
    drag: function (b) {
        this.start(b, "dragging");
        this.oPos = {
            x: b.pageX || 0,
            y: b.pageY || 0
        };
        return false
    },
    onDragging: function (b) {
        this.border.left = this.boundx(this.border.left + b.pageX - this.oPos.x, -this.width);
        this.border.top = this.boundy(this.border.top + b.pageY - this.oPos.y, -this.height);
        this.oPos = {
            x: b.pageX,
            y: b.pageY
        };
        this.adjust(this.border.left, this.border.top);
        if (this.target.setCapture) {
            this.target.setCapture()
        } else {
            if (window.captureEvents) {
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
            }
        }
        return false
    },
    adjust: function (d, f, g, b, e) {
        this.width = g || this.width || 0;
        this.height = b || this.height || 0;
        if (XK.$.browser.msie && XK.$.browser.version == 6) {
            if (XK.$("html").css("overflow") === "hidden") {
                f = f - this.$parent.scrollTop()
            }
        } else {
            f = parseInt(f - this.$parent.scrollTop())
        }
        if (parseInt(f) < 0) {
            f = 0
        }
        var c = null;
        c = {
            bottom: "",
            right: "",
            left: d,
            top: f
        };
        this.$target.css(c)
    },
    boundx: function (c, b) {
        return Math.max(Math.min(c || 0, this.bound.right + (b || 0)), this.bound.left)
    },
    boundy: function (c, b) {
        return Math.max(Math.min(c || 0, this.bound.bottom + (b || 0)), this.bound.top)
    },
    eventMethod: function (b, c) {
        return function (d) {
            return b[c](d, this)
        }
    }
};

Answer 3

这是一个swf的视频，然后播放器应该是他们自己开发的，有对外交互接口

曾听朋友说过。有个网站专门做这个的，有些中小企业站的下面，有这些语音介绍。

---

支持html5 video,canvas的话，前端js也可以实现这些。

Answer 4

一个flash包在dom里，dom做成可拖动的，透明是param的一个属性