gpt4 book ai didi

javascript - 点击时视频播放/暂停问题?

转载 作者:行者123 更新时间:2023-11-28 08:15:02 25 4
gpt4 key购买 nike

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

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

我设置了它,以便控件显示在 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 - 点击时视频播放/暂停问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23708022/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com