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

【问题标题】：Video Play/Pause on click issue?点击问题上的视频播放/暂停？
【发布时间】：2014-07-05 15:48:40
【问题描述】：

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

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

我将它设置为控件显示在 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();
    }
};

【问题讨论】：

请添加演示链接。

标签： javascript html video click playback

【解决方案1】：

我自己想通了。我禁用了默认视频控件和上下文菜单，因此无法通过它重新启用它们的控件，并且我制作了自己的控件。

【讨论】：