The Web Dev

Sometimes, we encounter the “The play() request was interrupted by a call to pause()” error when we add a video element.

In this article, we’ll look at how to fix the “The play() request was interrupted by a call to pause()” error when we add a video element.

Fix the “The play() request was interrupted by a call to pause()” Error with Video Elements

To fix the “The play() request was interrupted by a call to pause()” error, we can check if the video is played or paused we can check if the video is paused before playing, and check if the video is playing before pausing it.

To do this, we write the following HTML:

<video width="400">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>
<button id='play'>
  play
</button>
<button id='pause'>
  pause
</button>

Then we write:

const video = document.querySelector('video')
const play = document.querySelector('#play')
const pause = document.querySelector('#pause')
let isPlaying = false;

video.onplaying = () => {
  isPlaying = true;
};

video.onpause = () => {
  isPlaying = false;
};

const playVid = () => {
  if (video.paused && !isPlaying) {
    video.play();
  }
}

const pauseVid = () => {
  if (!video.paused && isPlaying) {
    video.pause();
  }
}

play.addEventListener('click', playVid)
pause.addEventListener('click', pauseVid)

We get the video and button elements with document.querySelector .

Then we define the isPlaying variable which indicates whether the video is playing or not.

Then we set isPlaying to true when the video is playing in the onPlaying method.

And we set isPlaying to false when the video is playing in the onPlayingmethod.

Then we have the playVid function that checks if the video is paused with video.paused and isPlaying .

And if video.paused is true and isPlaying is false , we call video.play to play the video.

And if video.paused is false and isPlaying is true, we call video.pause to pause the video in the pauseVid function.

Finally, we call addEventListener on play and pause to add the functions as click event listener functions.

Conclusion

To fix the “The play() request was interrupted by a call to pause()” error, we can check if the video is played or paused we can check if the video is paused before playing, and check if the video is playing before pausing it.

Sometimes, we want to set the date value of a date input with JavaScript.

In this article, we’ll look at how to set the date value of a date input with JavaScript.

Set the Date Value of a Date Input with JavaScript

To set the date value of a date input with JavaScript, we create a date string in YYYY-MM-DD format, then we set the value property of the input to that date string.

For instance, if we have the following date input:

<input type='date'>

Then we write:

const input = document.querySelector('input')  
const dt = new Date(2021, 1, 1);  
const day = ("0" + dt.getDate()).slice(-2);  
const month = ("0" + (dt.getMonth() + 1)).slice(-2);  
const date = dt.getFullYear() + "-" + month + "-" + day;  
input.value = date

We get the input with document.querySelector .

Then we create the dt date with the Date constructor.

Next, we get the day and month with the getDate and getMonth methods respectively.

And we pad them both with a 0 before it and call slice with -2 to get the last 2 digits.

Next, we create the date string by concatenating the year, which we get from getFullYear , month and day joined together with dashes.

Finally, we set date to input.value .

Now we should see the date input set with the value of the date.

Conclusion

To set the date value of a date input with JavaScript, we create a date string in YYYY-MM-DD format, then we set the value property of the input to that date string.

Sometimes, we want to use JavaScript to change the content of the meta tags of the web page.

In this article, we’ll look at how to use JavaScript to change the content of the meta tags of the web page.

Use JavaScript to Change the meta Tags of the Web Page

We can set the content property of each meta tag to change the content attribute value of each meta tag.

If we have the following meta tags:

<meta name='keywords'>  
<meta name='description'>

Then we can get the meta tags and change their contents by writing:

const meta = document.getElementsByTagName('meta')  
meta.keywords.content = "My new page keywords";  
meta.description.content = "My new page description"

We call document.getElementsByTagName with 'meta' to get both meta tags.

Then we set the meta tag with the name keywords by writing:

meta.keywords.content = "My new page keywords";

And we set the meta tag with the name description by writing:

meta.description.content = "My new page description"

Then we get:

<meta name="keywords" content="My new page keywords">  
<meta name="description" content="My new page description">

as a result.

Conclusion

We can set the content property of each meta tag to change the content attribute value of each meta tag.

Sometimes, we want to add an image to a canvas element with JavaScript.

In this article, we’ll look at how to add an image to a canvas element with JavaScript.

Add an Image to a Canvas Element with JavaScript

We can add an image to the canvas with the drawImage method.

For instance, if we have the following canvas:

<canvas style='width: 300px; height: 300px'></canvas>

Then we can write the following JavaScript to draw an image in it:

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const baseImage = new Image();
baseImage.src = 'https://i.picsum.photos/id/441/200/300.jpg?hmac=QKMN_HV9XLlzyUWdanPyq2Qz8FJmYYH5Q0CjPACcnsI';
baseImage.onload = () => {
  context.drawImage(baseImage, 0, 0);
}

We get the canvas element with document.querySelector .

And then we call getContext to get the context object.

Next, we create an image element with the Image constructor to create an image.

We set the src property to the URL of the image.

And then we set the baseImage.onload property to a function that calls context.drawImage with baseImage and the x and y coordinates of the top left corner.

Conclusion

We can add an image to the canvas with the drawImage method.

Sometimes, we want to add a property to each object in an array of JavaScript objects.

In this article, we’ll look at how to add a property to each object in an array of JavaScript objects.

Add a Property to Each Object in an Array of Objects with JavaScript with forEach

We can use the forEach method to loop through each element in an object and add a property to each.

For instance, we can write:

const arr = [{
  a: 'foo'
}, {
  a: 'bar'
}, {
  a: 'baz'
}]
arr.forEach((element) => {
  element.b = 'qux'
});
console.log(arr)

We have the arr array.

Then we call forEach with a callback that has the element parameter with the object being iterated through and we assign the b property to a value.

Therefore, arr is:

[
  {
    "a": "foo",
    "b": "qux"
  },
  {
    "a": "bar",
    "b": "qux"
  },
  {
    "a": "baz",
    "b": "qux"
  }
]

according to the console log.

Add a Property to Each Object in an Array of Objects with JavaScript with map

Also, we can use the map method to do the same thing.

For instance, we can write:

const arr = [{
  a: 'foo'
}, {
  a: 'bar'
}, {
  a: 'baz'
}]
const mapped = arr.map((element) => ({
  ...element,
  b: 'qux'
}));
console.log(mapped)

We call map with a callback where we spread the element object and add a b property to the same object.

And mapped is:

[
  {
    "a": "foo",
    "b": "qux"
  },
  {
    "a": "bar",
    "b": "qux"
  },
  {
    "a": "baz",
    "b": "qux"
  }
]

according to the console log.

Conclusion

We can use the forEach method to loop through each element in an object and add a property to each.

Also, we can use the map method to do the same thing.