javascript - HTML5 视频播放按钮重叠问题

标签 javascript html video

我正在创建一个视频播放器,但无法弄清楚如何通过单击我的播放按钮叠加层来播放我的视频。最终目标是通过单击按钮来播放它,按钮消失,当您想暂停时,单击视频,播放按钮会重新出现,但在我看来,当我单击时,我什至无法播放视频叠加播放按钮。

<div class="wrapper">
<video class="video" id="video" loop controls onclick="playPause()">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div class="playButton" onclick="playPause()"></div>
</div>

脚本

var bunnyVideo = document.getElementById("video");
function playPause() { 
if (bunnyVideo.paused)
{           
        bunnyVideo.play();
}
  else 
  {
       bunnyVideo.pause();
  }

} 

https://jsfiddle.net/sbtL5bag/

最佳答案

如果您更改 JavaScript 加载类型 No wrap - in <body>然后就可以了。

JSFiddle

关于javascript - HTML5 视频播放按钮重叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42843439/

相关文章:

javascript - 测试 Jasmine 测试是否失败

javascript - 动态更改关键帧后如何重新启动更新的动画?

javascript - 使用按钮通过 JavaScript 切换文本框的状态

html - CSS 背景图片不显示

video - 如何在 YII2 DetailView 小部件中渲染 YouTube 视频

javascript - 指令中的范围 true 给出了错误的结果

javascript - 使用javascript更改条形宽度

html - XML 和 HTML 特殊字符编码之间有区别吗?

video - ffmpeg concat 错误找不到合适的输出格式

ios - 将视频输出添加到 ARKit 应用