Home > Enterprise >  Javascript Video player
Javascript Video player

Time：01-07

When i click the space button (break) its only plays video not stopping with space

i don't know what's problem.

When i click the space button (break) its only plays video not stopping with space

i don't know what's problem.

When i click the space button (break) its only plays video not stopping with space

i don't know what's problem.

document.addEventListener("keydown", (e) => {
  const tagName = document.activeElement.tagName.toLowerCase();

  if (tagName === "input") return;

  switch (e.key.toLowerCase()) {
    case " ":
      if (tagName === "button") return;
    case "k":
      playVideo();
      break;
  }
});
// Play video function
function playVideo() {
  play_pause.innerHTML = "pause";
  play_pause.title = "pause";
  video_player.classList.add("paused");
  mainVideo.play();
}
// Pause video function
function pauseVideo() {
  play_pause.innerHTML = "play_arrow";
  play_pause.title = "play";
  video_player.classList.remove("paused");
  mainVideo.pause();
}

play_pause.addEventListener("click", () => {
  const isVideoPaused = video_player.classList.contains("paused");
  isVideoPaused ? pauseVideo() : playVideo();
});

mainVideo.addEventListener("play", () => {
  playVideo();
});

CodePudding user response：

let state = true;
switch (e.key.toLowerCase()) { 
 case e.keyKode == 32: 
 if(state == true){
     playVideo();   
     state = false;
 } else {
   pauseVideo();
   state = true;
 }  
break; 
}
}

Try this out for space.

CodePudding user response：

const video_player = document.querySelector("#video_player"),
  mainVideo = video_player.querySelector("#main-video"),
  progressAreaTime = video_player.querySelector(".progressAreaTime"),
  controls = video_player.querySelector(".controls"),
  progressArea = video_player.querySelector(".progress-area"),
  progress_Bar = video_player.querySelector(".progress-bar"),
  bufferedBar = video_player.querySelector(".bufferedBar"),
  fast_rewind = video_player.querySelector(".fast-rewind"),
  play_pause = video_player.querySelector(".play_pause"),
  fast_forward = video_player.querySelector(".fast-forward"),
  volume = video_player.querySelector(".volume"),
  volume_range = video_player.querySelector(".volume_range"),
  current = video_player.querySelector(".current"),
  totalDuration = video_player.querySelector(".duration"),
  auto_play = video_player.querySelector(".auto-play"),
  settingsBtn = video_player.querySelector(".settingsBtn"),
  picture_in_picture = video_player.querySelector(".picture_in_picture"),
  fullscreen = video_player.querySelector(".fullscreen"),
  settings = video_player.querySelector("#settings"),
  playback = video_player.querySelectorAll(".playback li"),
  spinner = video_player.querySelectorAll(".spinner");

let thumbnail = video_player.querySelector(".thumbnail");

document.addEventListener("keydown", (e) => {
  const tagName = document.activeElement.tagName.toLowerCase();

  if (tagName === "input") return;

  let state = true;
  switch (e.key.toLowerCase()) {
    case e.keyCode == 32:
      if (state == true) {
        state = false;
        playVideo();
      } else {
        state = true;
        pauseVideo();
      }
      break;
    case "f":
      video_player.requestFullscreen();
      break;
    case "esc":
      document.exitFullscreen();
      break;
    case "t":
      toggleTheaterMode();
      break;
    case "m":
      muteVolume();
      break;
    case "arrowleft":
    case "j":
      mainVideo.currentTime -= 10;
      break;
    case "arrowright":
    case "l":
      mainVideo.currentTime  = 10;
      break;
    case "c":
      toggleCaptions();
      break;
  }
});
// Play video function
function playVideo() {
  play_pause.innerHTML = "pause";
  play_pause.title = "pause";
  video_player.classList.add("paused");
  mainVideo.play();
}
// Pause video function
function pauseVideo() {
  play_pause.innerHTML = "play_arrow";
  play_pause.title = "play";
  video_player.classList.remove("paused");
  mainVideo.pause();
}

play_pause.addEventListener("click", () => {
  const isVideoPaused = video_player.classList.contains("paused");
  isVideoPaused ? pauseVideo() : playVideo();
});

mainVideo.addEventListener("play", () => {
  playVideo();
});

//  blob url
let mainVideoSources = mainVideo.querySelectorAll("source");
for (let i = 0; i < mainVideoSources.length; i  ) {
  let videoUrl = mainVideoSources[i].src;
  blobUrl(mainVideoSources[i], videoUrl);
}
function blobUrl(video, videoUrl) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", videoUrl);
  xhr.responseType = "arraybuffer";
  xhr.onload = (e) => {
    let blob = new Blob([xhr.response]);
    let url = URL.createObjectURL(blob);
    video.src = url;
  };
  xhr.send();
}

mainVideo.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

// fast_rewind video function

fast_rewind.addEventListener("click", () => {
  mainVideo.currentTime -= 10;
});

// fast_forward video function

fast_forward.addEventListener("click", () => {
  mainVideo.currentTime  = 10;
});

// Load video duration

mainVideo.addEventListener("loadeddata", (e) => {
  let videoDuration = e.target.duration;
  let totalMin = Math.floor(videoDuration / 60);
  let totalSec = Math.floor(videoDuration % 60);

  // if seconds are less then 10

  totalSec < 10 ? (totalSec = "0"   totalSec) : totalSec;
  totalDuration.innerHTML = `${totalMin} : ${totalSec}`;
});

// Current video duration

mainVideo.addEventListener("timeupdate", (e) => {
  let currentVideoTime = e.target.currentTime;
  let currentMin = Math.floor(currentVideoTime / 60);
  let currentSec = Math.floor(currentVideoTime % 60);
  //if seconds are less then 10 then add 0 at the begning
  currentSec < 10 ? (currentSec = "0"   currentSec) : currentSec;
  current.innerHTML = `${currentMin} : ${currentSec}`;

  let videoDuration = e.target.duration;
  // progressBar
  let progressWidth = (currentVideoTime / videoDuration) * 100;
  progress_Bar.style.width = `${progressWidth}%`;
});

// Let's update playing video current time on according to the progres bar width

progressArea.addEventListener("mousedown", (e) => {
  setTimelinePosition(e);
  progressArea.addEventListener("pointermove", setTimelinePosition);
  progressArea.addEventListener("pointerup", () => {
    progressArea.removeEventListener("pointermove", setTimelinePosition);
  });
});

function setTimelinePosition(e) {
  let videoDuration = mainVideo.duration;
  let progressWidthval = progressArea.clientWidth;
  let ClickoffsetX = e.offsetX;

  mainVideo.currentTime = (ClickoffsetX / progressWidthval) * videoDuration;

  let progressWidth = (mainVideo.currentTime / videoDuration) * 100;
  progress_Bar.style.width = `${progressWidth}%`;

  let currentVideoTime = mainVideo.currentTime;
  let currentMin = Math.floor(currentVideoTime / 60);
  let currentSec = Math.floor(currentVideoTime % 60);
  currentSec < 10 ? (currentSec = "0"   currentSec) : currentSec;
  current.innerHTML = `${currentMin} : ${currentSec}`;
}

function drawProgress(canvas, buffered, duration) {
  let context = canvas.getContext("2d", { antialias: false });
  context.fillStyle = "#fff";

  let height = canvas.height;
  let width = canvas.width;
  if (!height || !width) throw "Canva's width or height or not set.";
  context.clearRect(0, 0, width, height);
  for (let i = 0; i < buffered.length; i  ) {
    let leadingEdge = (buffered.start(i) / duration) * width;
    let trailingEdge = (buffered.end(i) / duration) * width;
    context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height);
  }
}

mainVideo.addEventListener("progress", () => {
  drawProgress(bufferedBar, mainVideo.buffered, mainVideo.duration);
});

// change volume
function changeVolume() {
  mainVideo.volume = volume_range.value / 100;
  if (volume_range.value == 0) {
    volume.innerHTML = "volume_off";
  } else if (volume_range.value < 40) {
    volume.innerHTML = "volume_down";
  } else {
    volume.innerHTML = "volume_up";
  }
}

function muteVolume() {
  if (volume_range.value == 0) {
    volume_range.value = 100;
    mainVideo.volume = 0.8;
    volume.innerHTML = "volume_up";
  } else {
    volume_range.value = 0;
    mainVideo.volume = 0;
    volume.innerHTML = "volume_off";
  }
}

volume_range.addEventListener("change", () => {
  changeVolume();
});

volume.addEventListener("click", () => {
  muteVolume();
});

// update progress area time and display block on mouse
progressArea.addEventListener("mousemove", (e) => {
  let progressWidthval = progressArea.clientWidth;
  let x = e.offsetX;
  progressAreaTime.style.setProperty("--x", `${x}px`);
  progressAreaTime.style.display = "block";
  if (x >= progressWidthval - 80) {
    x = progressWidthval - 80;
  } else if (x <= 75) {
    x = 75;
  } else {
    x = e.offsetX;
  }
  thumbnail.style.setProperty("--x", `${x}px`);
  thumbnail.style.display = "block";

  for (var item of thumbnails) {
    //
    var data = item.sec.find((x1) => x1.index === Math.floor(progressTime));

    // thumbnail found
    if (data) {
      if (item.data != undefined) {
        thumbnail.setAttribute(
          "style",
          `background-image: url(${item.data});
        background-position-x: ${data.backgroundPositionX}px;
        background-position-y: ${data.backgroundPositionY}px;
        --x: ${x}px;display: block;`
        );
        //exit
        return;
      }
    }
  }

  let videoDuration = mainVideo.duration;
  let progressTime = Math.floor((x / progressWidthval) * videoDuration);
  let currentMin = Math.floor(progressTime / 60);
  let currentSec = Math.floor(progressTime % 60);
  //if seconds are less then 10 then add 0 at the begning
  currentSec < 10 ? (currentSec = "0"   currentSec) : currentSec;
  progressAreaTime.innerHTML = `${currentMin} : ${currentSec}`;
});

progressArea.addEventListener("mouseleave", () => {
  thumbnail.style.display = "none";
  progressAreaTime.style.display = "none";
});

//auto play
auto_play.addEventListener("click", () => {
  auto_play.classList.toggle("active");
  if (auto_play.classList.contains("active")) {
    auto_play.title = "Autoplay is on";
  } else {
    auto_play.title = "Autoplay is off";
  }
});

mainVideo.addEventListener("ended", () => {
  if (auto_play.classList.contains("active")) {
    playVideo();
  } else {
    play_pause.innerHTML = "Replay";
    play_pause.title = "Replay";
  }
});

// Picture in picture

picture_in_picture.addEventListener("click", () => {
  mainVideo.requestPictureInPicture();
});

// Full screen function

fullscreen.addEventListener("click", () => {
  if (!video_player.classList.contains("openFullScreen")) {
    video_player.classList.add("openFullScreen");
    fullscreen.innerHTML = "fullscreen_exit";
    video_player.requestFullscreen();
  } else {
    video_player.classList.remove("openFullScreen");
    fullscreen.innerHTML = "fullscreen";
    document.exitFullscreen();
  }
});

// Open Settings

settingsBtn.addEventListener("click", () => {
  settings.classList.toggle("active");
  settingsBtn.classList.toggle("active");
});

//Playback rate
playback.forEach((event) => {
  event.addEventListener("click", () => {
    removeActionClasses();
    event.classList.add("active");
    let speed = event.getAttribute("data-speed");
    mainVideo.playbackRate = speed;
  });
});

function removeActionClasses() {
  playback.forEach((event) => {
    event.classList.remove("active");
  });
}

//store video duration and video path in local storage

window.addEventListener("unload", () => {
  let setDuration = localStorage.setItem(
    "duration",
    `${mainVideo.currentTime}`
  );
  let setSrc = localStorage.setItem("src", `${mainVideo.getAttribute("src")}`);
});

window.addEventListener("load", () => {
  let getDuration = localStorage.getItem("duration");
  let getSrc = localStorage.getItem("src");
  if (getSrc) {
    mainVideo.src = getSrc;
    mainVideo.currentTime = getDuration;
  }
});

mainVideo.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

//mouse move controls

video_player.addEventListener("mouseover", () => {
  controls.classList.add("active");
});

video_player.addEventListener("mouseleave", () => {
  if (video_player.classList.contains("paused")) {
    controls.classList.remove("active");
  } else {
    controls.classList.add("active");
  }
});

//mobile touch controls
video_player.addEventListener("touchstart", () => {
  controls.classList.add("active");
  setTimeout(() => {
    controls.classList.remove("active");
  }, 8000);
});

video_player.addEventListener("touchmove", () => {
  if (video_player.classList.contains("paused")) {
    controls.classList.remove("active");
  } else {
    controls.classList.add("active");
  }
});

//video preview
var thumbnails = [];

var thumbnailWidth = 158;
var thumbnailHeight = 90;
var horizontalItemCount = 5;
var verticalItemCount = 5;

let preview_video = document.createElement("video");
preview_video.preload = "metadata";
preview_video.width = "500";
preview_video.height = "300";
preview_video.controls = true;
preview_video.src = mainVideo.querySelector("source").src;

preview_video.addEventListener("loadeddata", async function () {
  //
  preview_video.pause();

  //
  var count = 1;

  //
  var id = 1;

  //
  var x = 0,
    y = 0;

  //
  var array = [];

  //
  var duration = parseInt(preview_video.duration);

  //
  for (var i = 1; i <= duration; i  ) {
    array.push(i);
  }

  //
  var canvas;

  //
  var i, j;

  for (i = 0, j = array.length; i < j; i  = horizontalItemCount) {
    //
    for (var startIndex of array.slice(i, i   horizontalItemCount)) {
      //
      var backgroundPositionX = x * thumbnailWidth;

      //
      var backgroundPositionY = y * thumbnailHeight;

      //
      var item = thumbnails.find((x) => x.id === id);

      if (!item) {
        //

        //
        canvas = document.createElement("canvas");

        //
        canvas.width = thumbnailWidth * horizontalItemCount;
        canvas.height = thumbnailHeight * verticalItemCount;

        //
        thumbnails.push({
          id: id,
          canvas: canvas,
          sec: [
            {
              index: startIndex,
              backgroundPositionX: -backgroundPositionX,
              backgroundPositionY: -backgroundPositionY,
            },
          ],
        });
      } else {
        //

        //
        canvas = item.canvas;

        //
        item.sec.push({
          index: startIndex,
          backgroundPositionX: -backgroundPositionX,
          backgroundPositionY: -backgroundPositionY,
        });
      }

      //
      var context = canvas.getContext("2d");

      //
      preview_video.currentTime = startIndex;

      //
      await new Promise(function (resolve) {
        var event = function () {
          //
          context.drawImage(
            preview_video,
            backgroundPositionX,
            backgroundPositionY,
            thumbnailWidth,
            thumbnailHeight
          );

          //
          x  ;

          // removing duplicate events
          preview_video.removeEventListener("canplay", event);

          //
          resolve();
        };

        //
        preview_video.addEventListener("canplay", event);
      });

      // 1 thumbnail is generated completely
      count  ;
    }

    // reset x coordinate
    x = 0;

    // increase y coordinate
    y  ;

    // checking for overflow
    if (count > horizontalItemCount * verticalItemCount) {
      //
      count = 1;

      //
      x = 0;

      //
      y = 0;

      //
      id  ;
    }
  }

  // looping through thumbnail list to update thumbnail
  thumbnails.forEach(function (item) {
    // converting canvas to blob to get short url
    item.canvas.toBlob(
      (blob) => (item.data = URL.createObjectURL(blob)),
      "image/jpeg"
    );

    // deleting unused property
    delete item.canvas;
  });

  console.log("done...");
});

Page link：https//www.codepudding.com/Enterprise/664649.html

Prev:How can I toggle between two images as my body's background?
Next:Inserting image into input type="file" using blob
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding