JavaScript播放器不在Opera/Chrome上工作

Question

所以问题是我有一个视频和2个按钮 -

<div id="buttonOn"><img src="assets/playbl.png" onClick="videoStart()" ></div>
<div id="buttonOff"><img src="assets/pausebl.ico" onClick="videoStop()"></div>

我的脚本如下：

<script>
var vid = document.getElementById("videos");
videos.muted = false;
var buttonOn = document.getElementById("buttonOn");
var buttonOff = document.getElementById("buttonOff");
vid.onended = videoStop();
function videoStart()
{
    vid.play();
    buttonOn.style.display = 'none';
    buttonOff.style.display = 'block';
}
function videoStop()
{
    vid.pause();
    buttonOff.style.display = 'none';
    buttonOn.style.display = 'block';
}
</script>

当我单击纽扣时，视频确实启动了，但只有2-3秒，然后停止。在边缘，视频正常工作。在我单击按钮时，视频"启动"一次后，我会收到此错误。

Answer 1

我在代码中看到了2个问题，首先videos.muted = false;应该是vid.muted = false，这是变量的正确名称。其次，您的onended事件处理程序存在问题。请记住，您必须将对函数的引用传递给事件处理程序，而不是函数执行的返回值。因此，您必须将vid.onended = videoStop();更改为vid.onended = videoStop;。现在，当视频结束时，它将正确调用Videostop功能。我在下面使用您的代码添加了一个摘要，其中包括我提到的更新，在Chrome中正常工作。看看您是否仍然有问题。

var vid = document.getElementById("videos");
vid.muted = false;
vid.onended = videoStop;
var buttonOn = document.getElementById("buttonOn");
var buttonOff = document.getElementById("buttonOff");
buttonOn.style.display = 'block';
buttonOff.style.display = 'none';
function videoStart()
{
    vid.play();
    buttonOn.style.display = 'none';
    buttonOff.style.display = 'block';
}
function videoStop()
{
    vid.pause();
    buttonOff.style.display = 'none';
    buttonOn.style.display = 'block';
}

.control{
  cursor: pointer;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="buttonOn" onClick="videoStart()"><i class="material-icons control">play_arrow</i></div>
<div id="buttonOff" onClick="videoStop()"><i class="material-icons control">pause</i></div>
<video id="videos" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>