Javascript 无法读取属性'；暂停'；暂停时的空值_Javascript_Jquery_Html_Video

Javascript 无法读取属性'；暂停'；暂停时的空值

javascript jquery html video

Javascript 无法读取属性'；暂停'；暂停时的空值,javascript,jquery,html,video,Javascript,Jquery,Html,Video,嗨，伙计们，我想做一个定制的视频播放器我试图使按钮暂停或播放视频，但它无法做到这一点 Html代码：index.Html <html> <head> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="../js/player.js"></script>

嗨，伙计们，我想做一个定制的视频播放器

我试图使按钮暂停或播放视频，但它无法做到这一点

Html代码：index.Html

<html>
<head>
  <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="../js/player.js"></script>
  <link rel="stylesheet" href="../css/style.css" />
  <title></title>
</head>
<body>
  <video id="main_video" src="../media/4k.mp4" controls autoplay></video>
  <p>
  <button onclick="play_pause()" type="button">PLAY/PAUSE</button>
</body>
</html>

单击按钮时，显示的错误如下：

未捕获类型错误：无法在播放时读取null的属性“pause”\u pause

我想将我的Javascript代码保存在一个单独的文件中

我无法理解错误，请帮助。

使用$（文档）。准备好，并将代码包装在其中。在文档准备就绪之前调用您的代码。或者，您也可以在函数本身中获取元素，如下面的代码段所示

var play\u pause\u status=“play”；
函数播放\暂停（）{
var video_screen=document.getElementById（'main_video'）；
如果（播放暂停状态=“暂停”）{
视频屏幕。播放（）；
播放\暂停\状态=“播放”；
}否则{
视频屏幕。暂停（）；
播放暂停状态=“暂停”；
}
}



播放/暂停

确保在查询之前加载DOM。您提到的错误是由于

video\u screen.pause（）

造成的。运行脚本时（在DOM完全加载之前），

video\u屏幕

元素为空，这可能是错误的原因

$(document).ready(function() {
  var video_screen = document.getElementById('main_video');
  var play_pause_status = "play";

  function play_pause()
  {
    if (play_pause_status == "pause")
    {
      video_screen.play();
      play_pause_status = "play";
    }
    else
    {
      video_screen.pause();
      play_pause_status = "pause";
    }
  }
});

可能是一个DOM就绪问题—在加载DOM之前运行的JS。因此javascript文件应该在页面末尾加载，否则代码应该放在a0中。

$(document).ready(function() {
  var video_screen = document.getElementById('main_video');
  var play_pause_status = "play";

  function play_pause()
  {
    if (play_pause_status == "pause")
    {
      video_screen.play();
      play_pause_status = "play";
    }
    else
    {
      video_screen.pause();
      play_pause_status = "pause";
    }
  }
});