html在视频上显示播放按钮,单击HTML5视频控件上的播放并没有摆脱我的播放按钮覆盖(Clicking play on HTML5 video controls doesn't get rid of...

单击HTML5视频控件上的播放并没有摆脱我的播放按钮覆盖(Clicking play on HTML5 video controls doesn't get rid of my Play button overlay)

我的HTML5视频播放器有一个错误。 我以为我可以轻松修复它，但它看起来并不那么容易。 单击叠加层时，视频将播放，叠加层将消失。 但我注意到在HTML5视频控件的视频开始时点击播放(不是我的叠加)并没有摆脱我的播放按钮叠加

HTML

脚本

var bunnyVideo = document.getElementById("bVideo");

function playPause() {

var el = document.getElementById("playButton");

if (bunnyVideo.paused) {

bunnyVideo.play();

el.className ="";

} else {

bunnyVideo.pause();

el.className = "playButton";

}

}

bunnyVideo.addEventListener("click", playPause, false);

My HTML5 video player has a bug. I thought I could fix it easily but it is not looking to be that easy. When you click the overlay the video plays and the overlay disappears. But I noticed at the start of the video clicking play (not my overlay) on HTML5 video controls doesn't get rid of my play button overlay

HTML

Script

var bunnyVideo = document.getElementById("bVideo");

function playPause() {

var el = document.getElementById("playButton");

if (bunnyVideo.paused) {

bunnyVideo.play();

el.className ="";

} else {

bunnyVideo.pause();

el.className = "playButton";

}

}

bunnyVideo.addEventListener("click", playPause, false);

原文：https://stackoverflow.com/questions/42960209

更新时间：2020-05-22 11:05

最满意答案

您还需要跟踪视频本身的播放/暂停事件，以更改叠加层的状态

不是最优雅的，但这会将叠加设置为仅触发播放/暂停并处理隐藏/显示按钮的事件，该事件根据视频行为触发

var el = document.getElementById("playButton");

function playPause() {

if (bunnyVideo.paused) {

bunnyVideo.play();

} else {

bunnyVideo.pause();

}

}

function playPause2() {

if (!bunnyVideo.paused) {

el.className ="";

} else {

el.className = "playButton";

}

}

bunnyVideo.addEventListener("click", playPause, false);

bunnyVideo.addEventListener("play", playPause2, false);

bunnyVideo.addEventListener("pause", playPause2, false);

you need to also track the play/pause events on the video itself to change the state of your overlay

not the most elegant, but this sets the overlay to just trigger play/pause and handles hiding/showing the button on a separate event that gets triggered based on the video behavior

var el = document.getElementById("playButton");

function playPause() {

if (bunnyVideo.paused) {

bunnyVideo.play();

} else {

bunnyVideo.pause();

}

}

function playPause2() {

if (!bunnyVideo.paused) {

el.className ="";

} else {

el.className = "playButton";

}

}

bunnyVideo.addEventListener("click", playPause, false);

bunnyVideo.addEventListener("play", playPause2, false);

bunnyVideo.addEventListener("pause", playPause2, false);

相关问答

似乎苹果的人再次改变了阴影。 为了隐藏控件，您需要使用以下CSS： /* This used to work for parent element of button divs */

/* But it is not enough now, below dont hide play button parent div */

*::-webkit-media-controls-panel {

display: none!important;

-webkit-appearance: non

...

您遇到问题是因为您在两种情况下都使用相同的变量来引用视频。 你在自己的代码中重复了一下自己，所以我试图删除那些位。 如果您有任何问题，请告诉我。

video.addEventListener("play", obApi);

function obApi() {

clicks++;

console.log(`I've been played ${clicks} time/s`);

}

...

您的iframe文档应与原始文档位于同一域中，而是属于同源策略限制。 如果没关系，那么这里是一个例子： 的index.html

Play

function play_video()

{

...

正如我在Lynda HTML5视频中看到的，关于播放/暂停按钮，只需使用： 播放/暂停： var video = document.getElementById("my_video");

$("#play_button").bind("click", function(){

video.play();

));

$("play_toggle").bind("click", function() {

if (video.paused) {

$(this).html("Pause")

...

第一步是为每个按钮添加一个事件处理程序。 例如，这样的东西应该适用于你的下一个按钮。 var el = document.getElementById("nextButton");

if (el.addEventListener) {

el.addEventListener("click", yourNextFunction, false);

} else {

el.attachEvent('onclick', yourNextFunction);

}

...

您还需要跟踪视频本身的播放/暂停事件，以更改叠加层的状态 不是最优雅的，但这会将叠加设置为仅触发播放/暂停并处理隐藏/显示按钮的事件，该事件根据视频行为触发 var el = document.getElementById("playButton");

function playPause() {

if (bunnyVideo.paused) {

bunnyVideo.play();

} else {

bunnyVideo.pause();

}

}

function p

...

如果您更改了JavaScript 加载类型 No wrap - in

那么它可以正常工作。 的jsfiddle If you change your JavaScript load type No wrap - in then it works. JSFiddle