Question

我正在使用querySelector访问HTML中的视频元素。我有一个启用网络摄像头并开始流式传输的按钮，另一个是默认禁用的按钮。开始流式传输时，我希望启用第二个按钮。

<!DOCTYPE html>
<html lang='en-US'>
  <head>
    <meta charset='UTF-8'>
    <script src='get-user-media.js'></script>
  </head>
  <body>
    <video autoplay></video>
    <div>
      <button class='button' id='get-user-media-button'>Start Camera</button>
      <button class='button' id='disabled-button' disabled>Disabled</button>
    </div>
    <script>
      document.querySelector('#get-user-media-button').addEventListener('click',onGetUserMediaButtonClick);
    </script>
  </body>
</html>

在get-user-media.js文件中，我有：

function onGetUserMediaButtonClick() {
  navigator.mediaDevices.getUserMedia({video: true})
  .then(mediaStream => {
    document.querySelector('video').srcObject = mediaStream;
  })
  .catch(error => console.log('Streaming error.'));
}

document.querySelector('video').addEventListener('play', function() {
  document.querySelector('#disabled-button').disabled = false;
});

在onGetUserMediaButtonClickClick（）函数中，querySelector（'video'）查找视频元素，然后正确单击按钮启动流。但是第二个querySelector（'video'）返回null。如果将脚本粘贴到HTML中，一切正常。

在单独的脚本文件中使用时，querySelector返回null

0 个答案: