Author: John Au-Yeung

Sometimes, we want to detect supported video formats for the HTML5 video tag with JavaScript.

In this article, we’ll look at how to detect supported video formats for the HTML5 video tag with JavaScript.

How to detect supported video formats for the HTML5 video tag with JavaScript?

To detect supported video formats for the HTML5 video tag with JavaScript, we can use the video element’s canPlayType method.

For instance, we write:

<video></video>

to add a video element.

Then we write:

const testEl = document.querySelector('video')
const mpeg4 = "" !== testEl.canPlayType('video/mp4; codecs="mp4v.20.8"');
const h264 = "" !== (testEl.canPlayType('video/mp4; codecs="avc1.42E01E"') ||
  testEl.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
const ogg = "" !== testEl.canPlayType('video/ogg; codecs="theora"');
const webm = "" !== testEl.canPlayType('video/webm; codecs="vp8, vorbis"');
console.log(mpeg4)
console.log(h264)
console.log(ogg)
console.log(webm)

to select the video element with querySelector.

Then we call testEl.canPlayType with various format strings to check if various video formats can be played.

If they can be played, then canPlayType should return something other than an empty string.

Conclusion

To detect supported video formats for the HTML5 video tag with JavaScript, we can use the video element’s canPlayType method.

Sometimes, we want to get hex integer from a string in JavaScript.

In this article, we’ll look at how to get hex integer from a string in JavaScript.

How to get hex integer from a string in JavaScript?

To get hex integer from a string in JavaScript, we can use the parseInt function.

For instance, we write:

const str = "#FFFFFF"
const hex = parseInt(str.replace(/^#/, ''), 16);
console.log(hex)

We call str.replace to remove the # sign with an empty string.

Then we call parseInt to convert the hex number to a decimal number.

As a result, we get 16777215 for the value of hex.

Conclusion

To get hex integer from a string in JavaScript, we can use the parseInt function.

Sometimes, we want to set an image’s src attribute to another image URL with JavaScript.

In this article, we’ll look at how to set an image’s src attribute to another image URL with JavaScript.

How to set an image’s src attribute to another image URL with JavaScript?

To set an image’s src attribute to another image URL with JavaScript, we can set the src property of the img element.

For instance, we write:

<img src='https://picsum.photos/50/50'>

to add an img element.

Then we write:

const img = document.querySelector('img')
img.src = 'https://picsum.photos/500/500'

to select the img element with document.querySelector.

And then we set the img.src property with the new image URL.

Now the new image is displayed on screen.

Conclusion

To set an image’s src attribute to another image URL with JavaScript, we can set the src property of the img element.

Sometimes, we want to join a JavaScript string array into a string without commas.

In this article, we’ll look at how to join a JavaScript string array into a string without commas.

How to join a JavaScript string array into a string without commas?

To join a JavaScript string array into a string without commas, we can call the array join method with an empty string.

For instance, we write:

const s = ['foo', 'bar', 'baz'].join('')
console.log(s)

to call join on the array with an empty string.

As a result, s is 'foobarbaz'.

Conclusion

To join a JavaScript string array into a string without commas, we can call the array join method with an empty string.

Sometimes, we want to enable or disable input elements with JavaScript.

In this article, we’ll look at how to enable or disable input elements with JavaScript.

How to enable or disable input elements with JavaScript?

To enable or disable input elements with JavaScript, we can loop through the inputs to disable the ones we want.

For instance, we write:

<button>
  toggle
</button>
<input>
<input>
<input>

to add a button with inputs.

Then we write:

const toggleInputs = () => {
  const inputs = document.getElementsByTagName('input');
  for (const input of inputs) {
    input.disabled = !input.disabled;
  }
}

document.querySelector('button').onclick = toggleInputs;

We define the toggleInputs function to select the inputs with getElementsByTagName.

Then we loop through the inputs with a for-of loop.

In the loop body, we toggle the disabled property of each input to toggle disabling them.

Therefore, when we click toggle, we see all the inputs being toggled between enabled and disabled.

Conclusion

To enable or disable input elements with JavaScript, we can loop through the inputs to disable the ones we want.