javascript - JavaScript播放器无法在Opera/Chrome上运行

所以问题是我有一个视频和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秒，然后停止。在Edge上，视频效果很好。在视频“开始”一次后，当我单击buttonOff时，我得到此error。

最佳答案

我在代码中看到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>