CODEWITHSUNDEEP
htmlhtml5-video
supercoolville
supercoolville

Reputation: 9086

Is there a way to set the default HTML5-Video volume?

HTML5 videos always start at 100% volume.

How can I make them start at 50% volume?

Upvotes: 56

Views: 120925

Answers (8)

Shahriar
Shahriar

Reputation: 2380

The React way using useCallback

import { useCallback } from "react"

const vid = useCallback((x) => x.volume = 0.5)

return (
    <video ref={vid} />
)

Upvotes: 0

dwelle
dwelle

Reputation: 7286

Assuming you're good with mixing JS into your HTML, you can leverage one of the events, such as loadstart:

<video onloadstart="this.volume=0.5" ...>

Upvotes: 60

Michael Hall
Michael Hall

Reputation: 351

<div>
    <video id="sampleMovie" src="mp4/Premier delivery.mp4" width="777" height="582.75" controls autoplay ></video>
        <script>
        var video = document.currentScript.parentElement;
        video.volume = 0.1;
        </script>
    </div>

Works perfectly!

Upvotes: 22

marksyzm
marksyzm

Reputation: 5601

You can affect the volume property of the <video> element as follows:

document.getElementsByTagName('video')[0].volume = 0.5;

If using jQuery then you can use their prop method to alter the volume in a jQuery collection object like so:

$("video").prop("volume", 0.5);

This will alter all DOM elements in the collection.

Upvotes: 42

Paul
Paul

Reputation: 103

If you don't want to mess with javascript, you can do it like this: 

<video muted="">
    <source src="yourvideo.mp4" type="video/mp4">
</video>

Upvotes: 3

tmpsa
tmpsa

Reputation: 29

Setting the default volume, using jquery:

$(function() {
    $("video").each(function(){ this.volume = 0.5; });
});

Upvotes: 2

Stan
Stan

Reputation: 21

With jQuery need to use a little trick:

$('#your_video_id').get(0).volume = 0;

Upvotes: 2

Ernestas Stankevičius
Ernestas Stankevičius

Reputation: 2493

var video = document.getElementById('player');
video.volume = 0.5;

P.S. Use this script for compatibility.

Upvotes: 36

Related Questions