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 30, 2021

Random walks in Python

 

Random Walks in Python using Matplotlib

In this blog, we’ll use Python to generate data for a random walk, and then use Matplotlib to create a visual representation of that data. A random walk is a path that has no clear direction but is determined by a series of random decisions, each of which is left entirely to chance. Take for example the path a confused ant would take if it took every step in a random direction. Random walk models are used in many real-world situations. Here is a real-world application of random walks.

Importing the modules

For this, we require two modules; Matplotlib and Random

import matplotlib.pyplot as plt

from random import choice

To make random decisions, we’ll store possible moves in a list and use the choice() function, from the random module, to decide which move to make each time a step is taken. Hence the random module.

 The RandomWalk() Function

def RandomWalk(num_points):

    x_values = [0]

    y_values = [0]

When calling the function, we will require to pass in the number of points that the random walk will make. Then, we make two lists to hold the x- and y-values, and we start each walk at the point (0, 0).

def RandomWalk(num_points):

    x_values = [0]

    y_values = [0]

 

    """Keep taking steps until the walk reaches 

the desired length."""

    while len(x_values) < num_points:

 

        """Decide which direction to go and how far 

to go in that direction."""

        x_direction = choice([1, -1])

        x_distance = choice([0, 1, 2, 3, 4])

        x_step = x_direction * x_distance

 

        y_direction = choice([1, -1])

        y_distance = choice([0,1,2,3,4])

        y_step = y_direction * y_distance

 

        """Reject a move that goes no-where"""

        if x_step == 0 and y_step == 0:

                continue

 

        x = x_values[-1] + x_step

        y = y_values[-1] + y_step

 

        x_values.append(x)

        y_values.append(y)

 

Next, we set up a loop that runs until the walk is filled with the correct number of points. The main part of the loop tells Python how to simulate four random decisions: will the walk go right or left? How far will it go in that direction? Will it go up or down? How far will it go in that direction? We use choice([1, -1]) to choose a value for x_direction, which returns either 1 for right movement or −1 for left. Next, choice([0, 1, 2, 3, 4]) tells Python how far to move in that direction (x_distance) by randomly selecting an integer between 0 and 4. (The inclusion of a 0 allows us to take steps along the y-axis as well as steps that have moved along both axes.). We need to determine the length of each step in the x and y directions by multiplying the direction of movement by the distance chosen. A positive result for x_step means move right, a negative result means move left, and 0 means move vertically. A positive result for y_step means move up, negative means move down, and 0 means move horizontally. If the value of both x_step and y_step is 0, the walk doesn’t go anywhere, so we continue the loop to ignore this move. To get the next x-value for the walk, we add the value in x_step to the last value stored in x_values and do the same for the y-values. When we have these values, we append them to x_values and y_values.

     x_values.append(x)

     y_values.append(y)

 

    """plot the points in the walk"""

    plt.style.use("classic")

    fig, ax = plt.subplots(figsize=(15,9))

    point_numbers = range(num_points)

    ax.scatter(x_values, y_values, c=point_numbers,

 cmap=plt.cm.Blues, edgecolors       ='none', s=15)

    

    """Emphasize the first and last points"""

    ax.scatter(0,0, c='green', edgecolors='none', s=100)

    ax.scatter(x_values[-1], y_values[-1], c='red', 

edgecolors='none', s=100)

 

    ax.get_xaxis().set_visible(False)

    ax.get_yaxis().set_visible(False)

 

    plt.show()

We proceed to create a scatter plot using Matplotlib. First, is to specify the style that we will use. The variable fig represents the entire figure or collection of plots that are generated. The variable ax represents a single plot in the figure and is the variable used most of the time. In the ax.scatter function we pass the x and y values to be plotted. We also pass the color maps. Pyplot module includes a set of built-in color maps. To use one of these cmaps, you need to specify how Pyplot should assign a color to each point in the data set. Here is how to assign each point a color based on its y-value.

ax.scatter(x_values, y_values, c=point_numbers, 

cmap=plt.cm.Blues, edgecolors='none', s=15)

Pass a list of y-values to c, and then tell pyplot which color map to use using the color map argument. This code colors the points with lower y-values light blue and colors the points with higher y-values dark blue. We also emphasize the starting points and ending points of our plot. Using green for beginning and red for the end of the walk.

RandomWalk(5000)

Finally, we call the function with the number of points we desire to be scattered on our random walk.




 


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

posted by Stephen @ September 30, 2021   0 Comments