JSFiddle - React, Tailwind, and code Playground

by Rachel Gallen

HTML

<iframe id="playervideo" autoplay src=" ">
  
</iframe>
<br>

<p id="msg">

</p>

CSS

#msg {
  width: auto;
  color: black;
  height: 50px;
  font-weight: bold;
}

JavaScript

$(document).ready(function() {
  var welcomeMovie1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
  var welcomeMovie2 = "http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
  var welcomeMovie3 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";

  var messageTime = new Date().getHours();
  var welcomeMsg = "";
  var vid = " ";

  //console.log(messageTime);
  if (messageTime >= 5 && messageTime <= 10) {
    welcomeMsg = "early bird";
    vid = welcomeMovie1;
  } else
  if (messageTime >= 10 && messageTime < 22) {
    welcomeMsg = "middle of day";
    vid = welcomeMovie2;
  } else
  if (messageTime >= 22 || messageTime < 5) {
    welcomeMsg = "night owl";
    vid = welcomeMovie3;
  }
  ////}, 1000 * 60);
   document.getElementById("msg").innerHTML = welcomeMsg;
  playVideo(vid);
 
  console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
  // promise functionb to create custom video controls and play functions
  function playVideo(src) {
    console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
    $("#playervideo").attr("src", src);
    $("#playervideo")[0].muted = false;

    if (autoplay == true) {

      var playPromise = $("#playervideo")[0].play();

      if (playPromise !== undefined) {

        playPromise.then(function() {}).catch(function() {

          if (autoplay == true) {
            $("#video-unmute-button").addClass("show");
            $("#playervideo")[0].muted = true;
            var playPromise2 = $("#playervideo")[0].play();

            playPromise2.then(function() {

            }).catch(function() {
              $("#video-start-button").addClass("show");


              $("#video-start-button").on("click", function() {
                $("#playervideo")[0].muted = false;
                $("#playervideo")[0].play();
                $("#video-start-button").removeClass("show");

              });
            });

       ...