Я создал настраиваемое контекстное меню и хотел бы, чтобы оно служило списком воспроизведения для моего проекта.Контекстное меню становится непривязанным над слоем HTML-видео

Однако он становится незаменимым для моего видеокадра.

Является ли это природа видео теге HTML?

Вот мой сниппет

<!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>

источник

2016-07-27 J.Doe

Новый ответ

я обнаружил, что еще более простое решение вашей проблемы существует. Если вы просто поставить тег видео до контекстного меню, что делает трюк:

<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>

Оригинал ответ

На моем ограниченном опыте, который я не любил, используя Z-индексы, так что я буду искать другое решение, но я поместил стили z-index: 1 в класс видео и z-index: 2 в класс контекстного меню, и это сделало этот трюк (по крайней мере, в Chrome, я не пробовал никаких других браузеров).

источник

2016-07-27 22:42:16

спасибо! Отлично работает! –

Контекстное меню становится непривязанным над слоем HTML-видео

ответ

Новый ответ

Оригинал ответ

Смежные вопросы