javascript中用于不同视频的两个按钮冲突

当您按下开始按钮时，Video1应启动，当您按下停止按钮时，Video2应启动并隐藏Video1。我的问题是，带有Video1的块会隐藏，Video2会启动，但当您按下开始按钮时，Video1不会启动。如果要删除启动Video2的部分脚本，则Video1将启动并隐藏

函数隐藏层（ObHide）{
document.getElementById（ObHide.style.visibility=“hidden”；
}
功能展示层（ObShow）{
document.getElementById（ObShow.style.visibility=“可见”；
}
//主函数，封装所有函数
函数init（）{
var video=document.getElementById（“Video1”）；
if（video.canPlayType）{
document.getElementById（“buttonbar1”）.style.display=“block”；
document.getElementById（“播放”）.addEventListener（“点击”，视频播放，错误）；
功能视频播放（evt）{
如果（video.src==“vid.mp4”）{//在第一次运行时，src为空，则转到获取文件
getVideo（）；
}
button=evt.target；//获取按钮id以根据状态交换文本
如果（video.paused）{//播放文件，并显示暂停符号
video.play（）；
button.textContent=“开始”；
}
}
}//运行时结束
}
//母版结束
//主函数，封装所有函数
函数init（）{
var video=document.getElementById（“Video2”）；
if（video.canPlayType）{
document.getElementById（“buttonbar”）.style.display=“block”；
document.getElementById（“停止”）.addEventListener（“单击”，视频播放，错误）；
功能视频播放（evt）{
如果（video.src==“vid.mp4”）{//在第一次运行时，src为空，则转到获取文件
getVideo（）；
}
button=evt.target；//获取按钮id以根据状态交换文本
如果（video.paused）{//播放文件，并显示暂停符号
video.play（）；
button.textContent=“停止”；
}
}
}
}//运行时结束
//母版结束

*{
填充：0；
保证金：0；
}
html{
高度：300px；
}
身体{
高度：600px；
填充：0；
保证金：0；
}
.包装纸{
最小高度：100%；
高度：自动；
裕度：-50px自动0；
宽度：100%；
}
.标题{
高度：50px；
背景色：#2f4f4f；
填充顶部：50px；
}
.内容{
利润率：3%；
宽度：60%；
高度：自动；
}
氢{
利润率：0.5%；
颜色：#fff；
}
#视频1{
宽度：80%；
高度：自动；
利润率最高：-75%；
背景尺寸：封面；
边框：2倍实心；
浮动：继承；
}
#视频2{
宽度：80%；
高度：自动；
利润底部：-2%；
背景尺寸：封面；
边框：2倍实心；
浮动：继承；
}
.页脚{
高度：50px；
背景色：#2f4f4f；
保证金：自动0；
}
b-play{
左边缘：53%；
利润率最高：-100%；
浮动：继承；
}
#玩{
宽度：14%；
高度：自动；
背景#229b24；
文本对齐：居中；
字体大小：250%；
字体系列：“Pacifico”，草书；
颜色：#fff；
}
b站{
左边缘：53%；
浮动：继承；
}
#停止{
宽度：14%；
高度：自动；
背景：红色；
文本对齐：居中；
字体大小：250%；
字体系列：“Pacifico”，草书；
颜色：#fff；
}

物理的
物理模型

您应该检查代码结构、函数和变量命名

我建议您重写

init（）

函数，因为它可能有elementId、buttonbar等参数。 所以你可以只做

init（“Video1”）；初始（“视频2”）
至于
var-video=
我会让它被全局访问并命名为
var-video1=
和
var-video2=

这将允许我在任何函数中使用这个变量，而不影响我所指的视频。
这是因为您有两个init函数。最后一个是覆盖初始定义

试试一个

函数隐藏层（ObHide）{
document.getElementById（ObHide.style.visibility=“hidden”；
}
功能展示层（ObShow）{
document.getElementById（ObShow.style.visibility=“可见”；
}
//主函数，封装所有函数
函数init（）{
var video1=document.getElementById（“video1”）；
var video2=document.getElementById（“video2”）；
if（video1.canPlayType&&video2.canPlayType）{
document.getElementById（“播放”）.addEventListener（“单击”，vidplay1，false）；
document.getElementById（“停止”）.addEventListener（“单击”，vidplay2，false）；
功能vidplay1（evt）{
button=evt.target；//获取按钮id以根据状态交换文本
如果（video1.paused）{//播放文件，并显示暂停符号
视频1.播放（）；
暂停（）；
button.textContent=“开始”；
}
}
功能vidplay2（evt）{
button=evt.target；//获取按钮id以根据状态交换文本
如果（video2.paused）{//播放文件，并显示暂停符号
视频2.播放（）；
视频1.暂停（）；
}
}
}//运行时结束
}

这应该可以工作
，因为您在单击时声明了两次
函数vidplay
？那么第二个会覆盖第一个？您还声明了两次
init（）
，因此第二次声明将覆盖第一次声明。试着为你的函数取不同的名字，字典里还有很多词：）