Thursday, June 22, 2023

Video Viewer with JavaScript: Enhancing Your HTML Video Player

Video viewer with JS.✌

 Have you ever wanted to create a custom video player for your website? With the power of JavaScript, you can take your HTML video player to the next level. In this tutorial, we'll walk you through the process of building an interactive video viewer using JavaScript

First, let's take a look at the HTML code that sets up our video player:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Video Player</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="player">
      <video class="player__video viewer"
src="652333414.mp4"></video>

      <div class="player__controls">
        <div class="progress">
          <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle"
            title="Toggle Play">►</button>
        <input
          type="range"
          name="volume"
          class="player__slider"
          min="0"
          max="1"
          step="0.05"
          value="1"
        />
        <input
          type="range"
          name="playbackRate"
          class="player__slider"
          min="0.5"
          max="2"
          step="0.1"
          value="1"
        />
        <button data-skip="-10"
class="player__button">« 10s</button>
        <button data-skip="25"
class="player__button">25s »</button>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>


This HTML structure sets up a video player with controls such as play/pause button, volume slider, playback speed slider, skip buttons, and a progress bar. Now, let's dive into the JavaScript code that brings this video player to life:

/* Get Our Elements */
const player = document.
        querySelector('.player');
const video = player.
        querySelector('.viewer');
const progress = player.
        querySelector('.progress');
const progressBar = player.
        querySelector('.progress__filled');
const toggle = player.
        querySelector('.toggle');
const skipButtons = player.
        querySelectorAll('[data-skip]');
const ranges = player.
        querySelectorAll('.player__slider');

/* Build out functions */
function togglePlay() {
  const method = video.paused
? 'play' : 'pause';
  video[method]();
}

function updateButton() {
  const icon = this.paused ?
'►' : '❚ ❚';
  console.log(icon);
  toggle.textContent = icon;
}

function skip() {
  video.currentTime += parseF
loat(this.dataset.skip);
}

function handleRangeUpdate() {
  video[this.name] = this.value;
}

function handleProgress() {
  const percent = (video.curren
tTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

function scrub(e) {
  const scrubTime = (e.offsetX
/ progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

/* Hook up the event listeners */
video.addEventListener('click',
togglePlay);
video.addEventListener('play',
updateButton);
video.addEventListener('pause',
updateButton);
video.addEventListener('timeupdate',
handleProgress);

toggle.addEventListener('click',
togglePlay);
skipButtons.forEach((button) =>
button.addEventListener('click', skip));
ranges.forEach((range) => range.
addEventListener('change',
     handleRangeUpdate));
ranges.forEach((range) =>
  range.addEventListener('mousemo
ve', handleRangeUpdate)
);

let mousedown = false;
progress.addEventListener('click'
, scrub);
progress.addEventListener('mousemo
ve', (e) => mousedown && scrub(e));
progress.addEventListener('mousedo
wn', () => (mousedown = true));
progress.addEventListener('mouseup
', () => (mousedown = false));


In the above code, we add event listeners to the progress bar to enable scrubbing functionality. When the progress bar is clicked, the scrub function is called to update the video's current time based on the click position. The mousedown flag is used to determine whether the mouse button is being held down, allowing continuous scrubbing as the mouse moves.

That's it! With this JavaScript code, you now have an enhanced HTML video player with interactive controls and a progress bar that updates as the video plays. Users can toggle play/pause, adjust volume and playback speed, skip forward or backward, and scrub through the video using the progress bar.

Feel free to customize the styling and behavior of the video player to match your website's design and requirements - or you could use mine!. Enjoy building your own video viewer with JavaScript! 

Querying DOM Elements: The code starts by selecting various elements from the DOM (Document Object Model) using document.querySelector and querySelectorAll. These elements include the main video player container, the video element itself, progress bar elements, toggle button, skip buttons, and range sliders.


Defining Functions:

togglePlay(): This function toggles the video play/pause state by checking if the video is currently paused or playing and calling the appropriate method (play() or pause()) on the video element.

updateButton(): This function updates the toggle button's icon based on whether the video is currently paused or playing.

skip(): This function allows the user to skip forward or backward in the video by adjusting the currentTime property of the video element based on the data-skip attribute of the clicked button.

handleRangeUpdate(): This function updates the video's volume and playback rate based on the value of the range sliders.

handleProgress(): This function updates the progress bar's filled width based on the current time and duration of the video, giving a visual representation of the progress.

scrub(e): This function allows the user to scrub through the video by calculating the scrub time based on the click position on the progress bar and updating the currentTime property accordingly.

Hooking up Event Listeners:

The video element has event listeners for the following events:

click: Calls the togglePlay() function to toggle the play/pause state of the video.play: Calls the updateButton() function to update the toggle button's icon when the video starts playing.

pause: Calls the updateButton() function to update the toggle button's icon when the video is paused.

timeupdate: Calls the handleProgress() function to update the progress bar as the video plays.The toggle button has a click event listener that calls the togglePlay() function to toggle the video play/pause state.The skip buttons have click event listeners that call the skip() function to allow skipping forward or backward in the video.

The range sliders have event listeners for both change and mousemove events. When the value of a range slider changes, the handleRangeUpdate() function is called to update the corresponding video property (volume or playback rate). Additional Functionality:

The mousedown flag is used in conjunction with the progress bar's mousemove event listener to enable continuous scrubbing. When the progress bar is clicked and the mouse button is held down, the scrub() function is called continuously as the mouse moves, allowing the user to scrub through the video seamlessly.

By combining these functions and event listeners, the JavaScript code enables interactive functionality for the HTML video player. Users can play/pause the video, adjust volume and playback speed, skip forward or backward, and scrub through the video using the progress bar.

Remember to include the JavaScript file in your HTML code using the <script> tag and provide the correct file path.

I hope this provides a more elaborate understanding of the JavaScript code and its functionality within the HTML video player. Happy coding!

Labels: , , , , , , , , , , , , , ,

posted by Stephen @ June 22, 2023   1 Comments

Thursday, September 23, 2021

Pitching my Start-up idea

 Statistics Student Pitches his Start-Up Idea

The Pitch 

This is the most important aspect of your Start-Up. No matter how great your idea is, if you can't convey it and you don't have enough capital, then your start-up is useless. And if you can't inspire people and you don't have a team working for you then your start-up is useless. But wait what if I can make a product that doesn't require much capital and I don't need a team - I could do it by myself? Well, I mean if you can't convey your idea to customers then you are not gonna have any customers and if you don't have any customers then your Start-up is useless. In every interaction relating to your Start-Up, you will somehow require to pitch it. That is why it is essential to perfect your pitch.

Easier said than done, here are 7 questions that you should answer as clearly as possible.

1. What do you do?

- Be as clear as possible, no fluff no bs. To test it, the text test. Write two sentences regarding your start-up in a text and send it to a friend and ask them to explain it to you in their own words. If they can do that then you are golden.

2. How big is the market?

Investors care about Return On Investment (ROI). If there is no market for your product then their investment is not worth it. Don't make your target market too wide or too narrow. Make it correct. You are only wasting up people's time if you are making up numbers.

3. What's your progress?

You want to make sure that you are doing something, what is possible in a given time frame? What can you do?

4. What is your unique insight?

What is your competitive advantage? How are you different from the start-up next door? What makes you more likely to succeed in your market?

5. What's your business model? 

How are you going to make money? Are you the grow fast think about money later kind of company or will you be making money right away? It's always better to have a plan of attack when it comes to monetization.

6. Who is on your team?

What are your credentials? Who is technical, who is not? Who is doing what? Is everyone useful? Are you as lean as possible?

7. What do you want?

This could be capital, convincing someone to work for you, or simply telling your mom that you are actually doing something and you are not wasting her life savings on your pet projects and that this time it's going to blow up for sure. 

With this in mind, you will be able to do a good pitch



Labels: , , , ,

posted by Stephen @ September 23, 2021   1 Comments