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

Question

Okay, I am trying to run a code in JavaScript that asks the user if they want to view a video. If they do, then a video would play, if not, then it won't. Basically, I am using an html5 code for the video and I am not sure how to only show the video if the user clicks OK. I am hoping for something along the lines that the video player won't even show up unless they click 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>

This is a very simple example of what I am trying to do. Anyways, that's it. All help appreciated.

Korgrue · Answer 1 · 2015-12-07T23:36:38.987

1

You don't need an if/else for this. Just ask the question and give them a button that says "Yes". If they don't want to watch it, they click nothing and the video stays hidden and paused. Using vanilla JS, this will reveal the video when a button with the ID = "myvidbutton" is clicked and call the play() method on the HTML5 video. It also hides the button.

If you want to do a yes and no button, then do the same as below, but add a click handler for the "no" button that does whatever the alternative is.

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

edited Dec 07 '15 at 23:36

answered Dec 07 '15 at 23:15

Korgrue

3,430
1
13
20

Vanilla JS for the win! – Seano666 Dec 07 '15 at 23:47
I feel kind of stupid asking, but what is the script src for vanilla Javascript? – StevenThePig_ Dec 08 '15 at 00:06
See http://vanilla-js.com/ and http://stackoverflow.com/questions/20435653/what-is-vanillajs :) But jokes aside, it's another way of saying "no framework", just plain old JavaScript – Pete Dec 08 '15 at 00:37
Not a stupid question at all @StevenThePig_ . If you are new to web development, "Vanilla JS" would probably throw you. Sorry about that. Vanilla JS is just plain old Javascript without any libraries/frameworks included. In your case, I chose plain old vanilla JS so you didn't have to import jQuery. Was not really necessary for a simple function like you were asking for. A lot of times people will answer you using jQuery - which is perfectly fine if its the right tool for the job. Your question lead me to believe you were new at this, so I wanted to keep it simple for you. Good luck! – Korgrue Dec 08 '15 at 01:00
Thank you, and I am new. I am 15 years old actually, just trying to learn for fun. Like I responded to the above responce, the weird thing is, video.play() seems not to work in Codecademy. – StevenThePig_ Dec 08 '15 at 02:10
I commented the same thing to the other solution, but I got it to work thank you so much! – StevenThePig_ Dec 08 '15 at 02:40
Keep at it, I was about your age when I started. Turn fun into a career. – Korgrue Dec 08 '15 at 05:32

score 0 · Accepted Answer · answered Dec 07 '15 at 23:38

0

Using your code as a basis, just play the video if the answer is yes.

Code below, and here is a working demo: 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>

NOTE: There are many other ways you can invoke the video. E.g. you can have it hidden with CSS and in the if(something) statement you can "show" it. You can also use AJAX to inject the video to the page only if the user hits Yes. The list goes on.

Edit: Here is another demo (fork) of the code above, but the video is hidden initially, unless the user says yes. https://jsfiddle.net/tjnkgbo7/

answered Dec 07 '15 at 23:38

Pete

895
1
6
13

The snippet works, but I am using codecademy.com. For some reason that doesn't work. Is there an alternative website for writing code for free? The code works great. – StevenThePig_ Dec 08 '15 at 00:05
Sorry, I don't understand. JSFiddle link works? But when you copy the code into Code Academy it doesn't? – Pete Dec 08 '15 at 00:33
Yes, that is correct. I click on the JSFiddle link and it works perfectly. Exactly what I want. But when I paste into Codecademy, it won't play the video unless I push the play button. I'm guessing video.play(); wont work or something for Codecademy. – StevenThePig_ Dec 08 '15 at 02:08
Oh wait, I got it. Codecademy uses tabs. The default has a tab for html, one for css, and one for javascript. I pasted the javascript code on the javascript side and the html on the html tab. That did not work. I tried using the to run the java code in html and it worked great. Thank you for your help. Both of your answers work. – StevenThePig_ Dec 08 '15 at 02:39

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

2 Answers2