Question

我可以使用onclick函数调用（示例1）播放视频，但不能使用内联清理调用（示例2）播放视频。为什么会这样？

ex1

  <script> 
  function p()
  {document.getElementById("myVideo").play();}
  </script>

  <video id="myVideo" width="100" height="100" controls loop>
  <source src="movie.mp4" type="video/mp4">
  </video>
  <button onclick="p();">play</button>

ex2

  <video id="myVideo" width="100" height="100" controls loop>
  <source src="movie.mp4" type="video/mp4">
  </video>
  <button onclick="document.getElementById("myVideo").play();">play</button>

Answer 1

<button onclick="document.getElementById("myVideo").play();">play</button>

您的HTML属性值用"个字符分隔，但是您尝试在其中使用"个字符来分隔JS字符串文字。

因此，您的属性值为document.getElementById(（这是无效的JS，当您单击按钮时，它将在浏览器的开发人员工具的控制台上报告），并且myVideo启动一个新属性。

在属性值内使用"或'。

更好的方法是，将事件处理程序与addEventListener（自1990年代后期以来的首选方式）而不是HTML绑定。

Answer 2

请勿嵌套单引号和双引号。使用以下之一：

onclick='document.getElementById("myVideo").play();'

或

onclick="document.getElementById('myVideo').play();"

Answer 3

您不能在其他引号内使用引号。

我认为这会起作用。

<video id="myVideo" width="100" height="100" controls loop>
<source src="movie.mp4" type="video/mp4">
</video>
      <button onclick="document.getElementById('myVideo').play();">play</button>

如何在嵌入式onclick处理程序中播放视频？

3 个答案: