Question

我正在制作一个视频网站，到目前为止我还没有设计它，所以它只是一个空白页面上的视频。

我已经做到这一点，以便在您点击页面上的缩略图之前视频不会缓冲。我添加了代码，当您在播放时单击它时暂停视频，并在再次单击时再次播放该视频。

我设置它以便控件显示在HTML视频上，但是有一个问题。当您单击视频本身暂停它工作正常，但当您单击底部控件栏上的任何内容时，它也会暂停。最重要的是当你点击实际控制栏上的播放/暂停按钮时，该按钮会暂停视频，但它会立即再次开始播放，因为我点击视频时播放的功能会激活。

我怎样才能使点击事件在控制栏上不起作用？

另一个问题是，在全屏模式下，点击视频暂停功能根本不起作用。我该如何解决这个问题？我知道在一篇文章中有很多问题。对不起：D

我到处寻找，找不到答案。继承我的HTML和我的JavaScript。该网站位于：https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Project Bluebar</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="javascript/vidloader.js"></script>
</head>

<body>

    <noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>

    <div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
    <div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
    <div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
    <div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>

</body>

</html>

和JavaScript

var cs;
var no;

for(var x = 1; x < 5; x++){
    no = x.toString();
    cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
    eval(cs);
}

var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;

function cla(){
    video = document.getElementById('av');
    if(video.paused){
        video.play();
    }else{
        video.pause();
    }
};

function vidcl(vid, img, id, wid, hei, imid, hovim){
    if(idm !== ''){
        document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
    }
    vidm = vid;
    imgm = img;
    idm = id;
    widm = wid;
    heim = hei;
    imidm = imid;
    hovimm = hovim;
    window.location.hash = id;
    document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};

window.onkeydown = function(event){
    video = document.getElementById('av');
    if(event.keyCode === 32){
        event.preventDefault();
        if(video.paused){
            video.play();
        }else{
            video.pause();
        }
    }
};

function thumbch(id, ims){
    document.getElementById(id).src = ims;
};

function thumbak(id, ims){
    document.getElementById(id).src = ims;
};

function fs(){
    video = document.getElementById('av');
    if(video.requestFullScreen){
        video.requestFullScreen();
    }else if(video.msRequestFullScreen){
        video.msRequestFullScreen();
    }else if(video.mozRequestFullScreen){
        video.mozRequestFullScreen();
    }else if(video.webkitRequestFullScreen){
        video.webkitRequestFullScreen();
    }
};

Answer 1

我自己想通了。我禁用了默认视频控件和上下文菜单，这样就无法通过它重新启用控件，而且我自己创建了控件。

点击问题上的视频播放/暂停？

1 个答案: