如何在Javascript if/else语句中使用HTML

How to use HTML in a Javascript if/else statement?

本文关键字：语句 HTML else Javascript if      更新时间：2023-09-26

好吧，我正在尝试用JavaScript运行一段代码，询问用户是否想观看视频。如果他们这样做了，那么视频就会播放，如果没有，那么就不会播放。基本上，我在视频中使用了一个html5代码，我不知道如何只在用户点击OK时显示视频。我希望视频播放器不会出现，除非他们点击OK。

var something = confirm("Want to watch a video?");
if (something) {
  //Run the HTML to play the video
} else {
  alert("Okay.");
}
<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css' />
  <script src='script.js'></script>
</head>
<body>
  <video width='320' height='240' controls>
    <source src='videolink.mp4'>
      Your browser does not support the video tag.
  </video>
</body>
</html>

这是我想做的一个非常简单的例子。无论如何，就是这样。感谢所有的帮助。

您不需要if/else。只要问这个问题，然后给他们一个按钮，上面写着"是"。如果他们不想看，他们什么也不点击，视频就会隐藏并暂停。使用vanillaJS，当点击ID为"myvidbutton"的按钮并调用HTML5视频上的play（）方法时，这将显示视频。它还隐藏了按钮。

如果你想做一个"是"answers"否"按钮，那么按照下面的方法做，但为"否"添加一个点击处理程序，它可以做任何其他选择。

HTML

<video id="Video1" width='320' height='240' controls>
    <source src='videolink.mp4'>
      Your browser does not support the video tag.
</video>
<p>Do you want to watch the video?</p>
<button id="myvidbutton">Yes</button>

JS

var video = document.getElementById("Video1");
var playbutton = document.getElementById("myvidbutton");
video.style.display = 'none';
playbutton.onclick = displayVideo();
function displayVideo(){
      video.style.display = 'block';
      playbutton.style.display = 'none';
      video.play();
}

以您的代码为基础，如果答案是肯定的，只需播放视频即可。

下面的代码，这里是一个工作演示：https://jsfiddle.net/q956pbvp/

JS

var video = document.getElementById("myvideo"),
    something = confirm("Want to watch a video?");
if (something) {
  video.play();
} else {
  alert("Okay.");
}

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css' />
  <script src='script.js'></script>
</head>
<body>
  <video width='320' height='240' controls id="myvideo">
    <source src='http://techslides.com/demos/sample-videos/small.mp4'>
      Your browser does not support the video tag.
  </video>
</body>
</html>

注意：还有许多其他方法可以调用视频。例如，你可以用CSS隐藏它，在if(something)语句中你可以"显示"它。你也可以使用AJAX将视频注入页面，只有当用户点击Yes时。名单还在继续。

编辑：这是上面代码的另一个演示（fork），但视频最初是隐藏的，除非用户同意。https://jsfiddle.net/tjnkgbo7/

相关文章：