logo api.video

Tutorials · 5 min read

Kid covering ears

Volume warnings

Many video providers will warn you if the volume level is too high. Learn how to do the same with api.video

Doug Sillars

May 14, 2021

With so many of us wearing headphones all day for calls, music, podcasts, etc, no one likes having the volume unexpectedly blast their ears. Using the api.video player SDK, you can set a warning when the volume is inadvertently set too high. Let's walk through how it works!

Setting up the SDK

In this simple HTML page, we have a div for the video, and a paragraph for text:

<head>
    ...
    <script src="https://unpkg.com/@api.video/player-sdk" ></script>
</head>

<body>
	<div id="target" style="align:center;width:75%;"></div>
	<p id="text"></p>
</body>
</html>

We add a script to load the player SDK. Now we can instantiate the player with JavaScript:

   <script type="text/javascript">
        window.player = new PlayerSdk("#target", { 
            id: "vi4blUQJFrYWbaG44NChkH27", 
            autoplay:true,
            muted:true
        });
     
    </script>

This creates the video, using the videoId and tells the player to autoplay the video while muted. (This is the way to ensure that autoplay works in all browsers, but sadly is muted).

Volume control

When a video is muted, the user will click/touch on the volume control. In this case we do not want them to accidently turn the volume too high, so we're going to set an initial maximum volume of 50% (in reality, this is kind of low, but test for yourself.)

We do this by setting the event listener for volumechange, so whenever there is a change in volume, we can apply our script.

Here's the code for the volume change:

            var warning=false;
            player.addEventListener('volumechange', function(volume) { 
            var vol = volume.volume;
                console.log(`volume has changed: ${vol}`); 
                if(vol >0.50){
                    console.log("too loud!");
                    if(warning){
                        //they've been warned
                        document.body.style.backgroundColor = "red";
                        document.getElementById("text").innerHTML= "THIS IS LOUD";
                    }
                    else{
                        //warn user
                        warning=true;
                        player.setVolume(.5);
                        document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                    }
                }else if(vol<.50){
                        warning=false;
                        document.body.style.backgroundColor = "green";
                        document.getElementById("text").innerHTML="Nice and soft.";
                    }
		                else{ //exactly 0.5
                    document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                }

            });

First, we declare the boolean warning as false. If the player detects a volume change, we look to see if the volume is over or under 50%.

High volume

If the volume is set to over 50%, we initially reset it to 50% and ask, "are you sure?", and the warning boolean is flipped to true. If the user tries to go over 50% again, we let them set the higher volume (and change the page background to red).

Low volume

If the volume is set to under 50%, we change the background to green.

That's it

The code is on Github, and the demo is live at volumewarning.a.video.

Here's a video of the demo in action:

LATEST ARTICLES

Tutorials · 6 min read

Video Metadata: Exploring advanced use cases and their benefits

Learn what is video metadata and how it finds application in various scenarios like e-learning or video sharing.

Logo api.video

api.video · February 23, 2024

Tutorials · 4 min read

API showcase - build a service like Airbnb with api.video

Building a website like Airbnb? Let api.video enhance your platform with video upload and delivery functionalities. This blog post showcases the API endpoints that you can use to build a simple and robust solution that enables your users to upload and play videos for their customers.

Logo api.video

api.video · December 27, 2023

Tutorials · 3 min read

Lost in translation? Fill in the blanks with captions!

Unlock the full potential of your video content with api.video's user-friendly captioning feature. This guide introduces the seamless integration of captions into your videos hosted on api.video, utilizing the WebVTT format.

Logo api.video

api.video · December 20, 2023

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.

Affordable

Volume discounts and usage-based pricing to ensure you don’t exceed your budget.