private

by holden321

HTML

<div id="html5-video-menu" class="menu" style="display:none;">
    <div act="play">Play</div>
    <div>Mute</div>
    <div>Loop</div>
    <div class="separator"></div>
    <div>Download video</div>
    <div>Copy video URL</div>
    <div class="separator"></div>
    <div>Show controls</div>
    <div>Autoplay</div>
    <div>Theater mode</div>
</div>
<div id="video" style="height:400px;width:100%;background:lightgray;"></div>

CSS

.menu {
    position:fixed;
    left:0;
    top:0;
    margin:0;
    cursor:default;
    background:#F0F0F0;
    max-height:100%;
    overflow:auto;
    box-shadow:2px 2px 5px #888888;
    font-family:"Segoe UI", "Tahoma", sans-serif;
    font-size:12px;
    border:1px solid #A0A0A0;
    padding:2px;
    z-index:999;
}

.menu .checked {background-image:url(check.png)}

.menu div {
    border:1px transparent solid;
    white-space:nowrap;
    padding:0 10px 0 24px;
    position:relative;
    overflow:hidden;
    background-repeat:no-repeat;
    background-position:4px center;
    line-height:18px;
}
.menu div:hover {
    border-color:#1676FF;
    background-color:#46A9FF;
    color:white;
}
.menu div.separator {
    height:0;
    border:0;
    border-top:1px solid #A0A0A0;
    border-bottom:1px solid white;
    margin:4px 0 3px 20px;
}
.menu div[disabled] {
    color:gray;
    border-color:transparent;
    background-color:transparent;
}
.menu .reload {
    background-image:url(reload.png);
}
.menu .delete {
    background-image:url(delete.png);
}
.menu .properties {
    background-image:url(properties.png);
}
.menu .mark-as-read {
    background-image:url(read_selected.png);
}
.menu .mark-as-unread {
    background-image:url(read.png);
}
.menu .opml {
    background-image:url(opera.png);
}
.menu .tra {
    background-image:url(icon_16.png);
}
/*.menu div[disabled] {background-image:none;}*/
 .menu div.nest {
    background-image:url(left.png);
}
.menu.rightie div {
    padding-right:16px;
}
.menu.rightie div.nest {
    background-image:url(right.png);
    background-position:right center;
}
.menu.rightie .group.nest {
    background-image:url(right.png), url(folder.png);
    background-position:right center, 4px center;
}
.menu.rightie .nest#updating-menu {
    background-image:url(right.png), url(reload.png);
    background-position:right center, 4px center;
}
.menu#real-select-layout div {
    float:left;
    width:72px;
    height:62px;
    border-radius:5px;
...

JavaScript

var menu=document.getElementById("html5-video-menu");

menu.onmousedown=function(e){
    var act=e.target.getAttribute("act");
    var acts=["play"];
    if(act&&~acts.indexOf(act)) {
        hideMenu();
        if(act=="play") {
            alert("play");
        }
    }
    e.stopPropagation();
    return false;
};

document.getElementById("video").oncontextmenu=function(e){
    menu.style.left=e.clientX-1+"px";
    menu.style.top=e.clientY-1+"px";
    menu.style.display="block";
    return false;
};

document.addEventListener("mousedown",hideMenu);

function hideMenu(){
    menu.style.display="none";
}