带有HTML和Javascript的视频控制按钮不'；行不通

我正在为我的视频制作一个控制按钮系统。现在看起来是这样的：

如果我单击播放按钮，url将变为暂停按钮，您将看到视频正在播放。就这一点而言，它的工作正是我想要的。但现在我想要的结果是：如果我在播放视频时将光标从视频中移出，暂停按钮必须消失。如果我在视频暂停时移出（如图中所示），播放按钮必须保持不变。我为视频制作了一个“onmouseout”，但没有效果。我希望有人能帮助我

HTML:

JAVASCRIPT:

function playPause() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
        document.getElementById('button').src = "pause.png"
    }
    else {
        video.pause();
        document.getElementById('button').src = "play.png"
    }

}

function disappear() {
    if( document.getElementById('button').src = "pause.png") {
        document.getElementById('textVideoPlay').style.display = "none";
    }
}

---

以下是您可以尝试的内容：

function disappear() {

  var video = document.getElementById('myVideo');

  if (video.paused) {
    document.getElementById('button').src = "play.png";
    document.getElementById('textVideoPlay').style.display = "block";

  } else {
    document.getElementById('button').src = "pause.png";
    document.getElementById('textVideoPlay').style.display = "none";
  }
}

---

我不确定它是否有效，因为我现在无法测试它，但是看到您的

playpaise（）

正在工作，这应该也能工作。

尝试使用

addEventListener（）

注册

mouseout

事件。将类用于播放器的状态（即开/关、播放/暂停等） 详细信息在下面的代码段中进行了注释

片段

//引用按钮和容器
var btn1=document.getElementById（'b1'）；
var pyr1=document.getElementById（'p1'）；
//单击按钮时。。。
btn1.addEventListener（'click'，函数（事件）{
//参考视频
var vid1=document.getElementById（'v1'）；
//基于状态的条件：已暂停
如果（视频1.暂停）{
视频1.播放（）；
}否则{
vid1.暂停（）；
}
/*不管新的状态是什么，如果。。。
||我们有。播放或。按按钮暂停上课
||之前，两个类都将切换
||同时,。
*/
btn1.classList.toggle（'play'）；
btn1.classList.toggle（'pause'）；
}，假）；
//如果鼠标离开容器区域。。。
pyr1.addEventListener（'mouseout'，函数（事件）{
//如果按钮有类。暂停。。。
if（btn1.classList.contains（'pause'））{
//将其不透明度设置为0
btn1.style.opacity=0；
//让它消失
btn1.style.transition='1s ease'；
}
}，假）；
//如果鼠标进入容器区域。。。
pyr1.addEventListener（'mouseover'，函数（事件）{
//如果按钮有类。暂停。。。
if（btn1.classList.contains（'pause'））{
//将其不透明度设置为1
btn1.style.opacity=1；
//让它慢慢消失
btn1.style.transition='1s ease'；
}
}，假）
/*此容器包装整齐
||视频的宽度
*/
#p1{
位置：相对位置；
显示：表格单元格；
光标：指针；
}
/*这是为了使按钮成为覆盖*/
#b1{
字体大小：100px；
颜色：rgba（0,255,255,3）；
位置：绝对位置；
z指数：1；
高度：100px；
宽度：100px；
顶部：calc（50%-50px）；
左：计算（50%-50px）；
文字装饰：无；
}
/*这两个Rulset使用简单的HTML实体
||用于播放/暂停按钮
*/
.播放：：之后{
内容：'\25b6'；
}
.暂停：：之后{
内容：'\23f8'；
}

我认为问题是由z索引引起的。该视频的z索引为-3，因为它作为背景。我将用CSS代码更新我的问题。是的，请这样做。谢谢你的回答，但是“播放”和“暂停”按钮的来源在代码中的什么地方？我在我的HTML、CSS和Javascript文件中复制了你的代码，但它根本不起作用。如果我点击这个按钮，就不会发生任何事情。你不能期望代码仅仅通过将其放入另一个代码中就能工作，它并不总是神奇地工作。你的编辑是在我开始回答这个问题后发布的，所以风格肯定会冲突。如果您阅读我的代码，您会发现我使用的变量名称较短，并且删除了在上下文中回答或提问时不需要的额外HTML。我的代码确实有效，您通过单击蓝色按钮测试了代码段，对吗？
function playPause() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
        document.getElementById('button').src = "pause.png"
    }
    else {
        video.pause();
        document.getElementById('button').src = "play.png"
    }

}

function disappear() {
    if( document.getElementById('button').src = "pause.png") {
        document.getElementById('textVideoPlay').style.display = "none";
    }
}

function disappear() {

  var video = document.getElementById('myVideo');

  if (video.paused) {
    document.getElementById('button').src = "play.png";
    document.getElementById('textVideoPlay').style.display = "block";

  } else {
    document.getElementById('button').src = "pause.png";
    document.getElementById('textVideoPlay').style.display = "none";
  }
}