我已经创建了一个上下文菜单项,但是它并非一直都起作用。例如,当我单击暂停时,它会暂停,而当我单击播放时,它会再次播放,然后再发生一次。在那之后,当我单击它时它什么也没做。然后,它返回到开始的地方。这是我的代码:

<script>
    var x = 1;
</script>
<script>
    // JAVASCRIPT (jQuery)

    // Trigger action when the contexmenu is about to be shown
    $(document).bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        // Show contextmenu
        $(".custom-menu").finish().toggle(100).

        // In the right position (the mouse)
        css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        });
    });


    // If the document is clicked somewhere
    $(document).bind("mousedown", function (e) {

        // If the clicked element is not the menu
        if (!$(e.target).parents(".custom-menu").length > 0) {

            // Hide it
            $(".custom-menu").hide(100);
        }
    });


    // If the menu element is clicked
    $(".custom-menu li").click(function(){

        // This is the triggered action name
        switch($(this).attr("data-action")) {

            // A case for each action. Your actions here
            case "first": alert("first"); break;
            case "second": alert("second"); break;
            case "third": alert("third"); break;
        }

        // Hide it AFTER the action was triggered
       $(".custom-menu").hide(100);
      });
</script>
<script>
    function changeContextMenuIn() {

</script>
<style>
     /* CSS3 */
    /* The whole thing */
    .custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
    }
    /* Each of the items in the list */
    .custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    }
    .custom-menu li:hover {
    background-color: #DEF;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<video width="640" id="vidPlayerMain" autoplay="" controls="" onclick="if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}" name="media">
    <source src="https://video-lax1-1.xx.fbcdn.net/hvideo-xpa1/v/t42.1790-2/1063787_495053737243964_500266464_n.mp4?efg=eyJybHIiOjYzNSwicmxhIjo3MzZ9&rl=635&vabr=353&oh=d763b8ecfa2a823b9971c497732e4b69&oe=55C8F2C9" type="video/mp4">
</video>
<br />
<ul id='contextMenu' class='custom-menu'>
    <li data-action="first"><a href="javascript:if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else if (x == 0) {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}; $('.custom-menu').hide(100);" style="text-decoration:none; color:#333;" id="pauseContextMenu">Pause</a></li>
</ul>

最佳答案

这是因为暂停和播放视频的功能绑定到contextMenu的元素,而警报数据操作属性的功能绑定到contextMenu的

  • 元素,并且元素没有完全占据
  • 的宽度和高度元件。 (当您单击视频所在区域之外的上下文菜单按钮时,该视频有时不会播放/暂停)

    一个简单的解决方案是更改这两个元素的CSS,以使
    元素占据整个宽度和高度。

    CSS:

    /* CSS3 */
    /* The whole thing */
    .custom-menu {
        display: none;
        z-index: 1000;
        position: absolute;
        overflow: hidden;
        border: 1px solid #CCC;
        white-space: nowrap;
        font-family: sans-serif;
        background: #FFF;
        color: #333;
        border-radius: 5px;
        padding: 0;
    }
    /* Each of the items in the list */
    .custom-menu li {
        cursor: pointer;
        list-style-type: none;
    }
    .custom-menu li:hover {
        background-color: #DEF;
    }
    .custom-menu li a {
        padding: 8px 12px;
        display:inline-block;
    }
    

  • 10-12 01:37
    查看更多