Ich habe ein benutzerdefiniertes Kontextmenü erstellt und möchte, dass es als Wiedergabeliste für mein Projekt verwendet wird.Das Kontextmenü kann nicht mehr geklickt werden. HTML-Video-Ebene

Allerdings kann es über meinen Videoframe nicht klickbar werden.

Ist das die Art von HTML-Video-Tag?

Hier ist mein Snippet

<!doctype html> 
<html> 
<head> 
<title>Dee</title> 
<style type="text/css"> 
*{ 
    margin: 0; 
    padding: 0; 
    } 

    html, body, .container{ 
    height: 100%; 
    } 

    body{ 
    font-family: verdana; 
    font-size: 10px; 
    } 

    .container{ 
    background: #f6f6f6; 
    } 

    .context-menu { 
    width: 200px; 
    height: auto; 
    box-shadow: 0 0 20px 0 #ccc; 
    position: absolute; 
    display: none; 
    } 

    .context-menu ul{ 
    list-style: none; 
    padding: 5px 0 5px 0; 
    } 

    .context-menu ul li:not(.separator){ 
    padding: 10px 5px 10px 5px; 
    border-left: 4px solid transparent; 
    cursor: pointer; 
    } 

    .context-menu ul li:hover{ 
    /*background: #eee;*/ 
    background: #fff; 
    border-left: 4px solid #666; 
    } 

    .separator{ 
    height: 1px; 
    background: #dedede; 
    /*background: #fff;*/ 
    margin: 2px 0 2px 0; 
    } 

    .videoClass{ 
    background: #fff; 
    border-color: #fff; 
    } 
</style> 
</head> 

<body> 
    <div class="container" oncontextmenu="return showContextMenu(event);"> 
    <div id="contextMenu" class="context-menu"> 
     <ul> 
     <li>List</li> 
     <li>List</li> 
     <li>List</li> 
     <li class="separator"></li> 
     <li>List</li> 
     </ul> 
    </div> 
    <video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video> 
    </div> 


    <script type="text/javascript"> 
    window.onclick = hideContextMenu; 
    window.onkeydown = listenKeys; 
    var contextMenu = document.getElementById('contextMenu'); 

    function showContextMenu(){ 
     contextMenu.style.display = 'block'; 
     contextMenu.style.left = event.clientX + 'px'; 
     contextMenu.style.top = event.clientY + 'px'; 
     return false; 
    } 

    function hideContextMenu(){ 
     contextMenu.style.display = 'none'; 
    } 

    function listenKeys(event){ 
     var keyCode = event.which || event.keyCode; 
     if (keyCode == 27) { //27 means escape key 
     hideContextMenu(); 
     } 
    } 
    </script> 
</body> 
</html>

Quelle

2016-07-27 J.Doe

Neue Antwort

Ich fand, dass eine noch einfachere Lösung für Ihr Problem besteht. Wenn Sie nur den Video-Tag vor dem Kontextmenü setzen, dass der Trick:

<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video> 
<div id="contextMenu" class="context-menu"> 
    <ul> 
     <li>List</li> 
     <li>List</li> 
     <li>List</li> 
     <li class="separator"></li> 
     <li>List</li> 
    </ul> 
</div>

Original-Antwort

In meiner begrenzten Erfahrung habe ich nicht z-Indizes mit größtem Vergnügen benutzt, also wird ich suche eine andere Lösung, aber ich legte Stile z-index: 1 auf Videoklasse und z-index: 2 auf der Kontext-Menü-Klasse, und das hat diesen Trick (zumindest in Chrom, ich habe keine anderen Browser versucht).

Quelle

2016-07-27 22:42:16

danke! Es wirkt wie ein Zauber! –

Das Kontextmenü kann nicht mehr geklickt werden. HTML-Video-Ebene

Antwort

Neue Antwort

Original-Antwort

Verwandte Themen