Question

好的，我正在尝试在JavaScript中运行一个代码，询问用户是否要查看视频。如果他们这样做，那么视频会播放，如果没有，那么它就不会播放。基本上，我使用html5代码的视频，我不知道如果用户单击确定如何只显示视频。我希望除非他们点击Okay，否则视频播放器甚至不会出现这些内容。

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>

这是我想要做的一个非常简单的例子。无论如何，就是这样。所有帮助表示赞赏。

Answer 1

你不需要if / else。只要问问题并给他们一个“是”的按钮。如果他们不想观看，他们点击什么都没有，视频保持隐藏和暂停状态。使用vanilla JS，当点击ID =“myvidbutton”的按钮并在HTML5视频上调用play（）方法时，这将显示视频。它也隐藏了按钮。

如果你想做一个是和否按钮，那么就像下面那样做，但是为“无”按钮添加一个点击处理程序，它可以做任何替代方案。

<强> 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();
}

Answer 2

使用您的代码作为基础，只要答案是肯定的，就播放视频。

下面的代码，这是一个有效的演示： 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将视频注入页面。名单还在继续。

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

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

2 个答案: