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

Question

HTML5 videos always start at 100% volume.

How can I make them start at 50% volume?

Google chrome stable version 67 fixed this by disabling the volume controls on html5 video player, and basically forcing volume to always be at 100% full. For details see: https://productforums.google.com/forum/#!topic/chrome/2lN8hckg9cg — Eric Leschinski, Aug 25 '18 at 04:29

dwelle · Answer 1 · 2022-02-22T22:13:24.650

54

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" ...>

edited Feb 22 '22 at 22:13

answered Jan 05 '16 at 09:37

dwelle

6,894
2
46
70

2

simplest answer! If only the W3C saw fit to give us a volume attribute to go along with our muted one. – Grae Kindel Jun 13 '16 at 21:08
1

All the answers are hacks, but this one at least puts the code close to the action. Although there is an argument for unobtrusiveness, I think this is a worthy exception to allow legacy coders to see why the volume is starting at 50%. – Enigma Plus Dec 15 '16 at 09:45
1

I don't know why, but onLoadStart doensn't seem to work for me (in React) – Shahriar Jul 27 '22 at 18:12
@Shahriar https://rp40jo.csb.app/ – dwelle Jul 27 '22 at 21:10
@dwelle The example works correctly, but my code still doesn't. I also tried `onLoadStart={(e) => console.log(e)}` but no seems like onLoadStart doesn't even fire. – Shahriar Jul 27 '22 at 21:39

score 41 · Answer 2 · edited Oct 02 '15 at 11:33

41

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.

edited Oct 02 '15 at 11:33

chrki

6,143
6
35
55

answered Feb 18 '14 at 16:22

marksyzm

5,281
2
29
27

Small addition for those who don't know: this code needs to be put in browser's add-on "*monkey"(there are different implementations). – Alex Barkun Dec 05 '19 at 14:46

score 36 · Answer 3 · answered Sep 28 '11 at 11:22

36

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

P.S. Use this script for compatibility.

answered Sep 28 '11 at 11:22

Ernestas Stankevičius

2,420
2
24
30

Nice, small and functional. Thumbs Up! – Samuel Ramzan Sep 29 '15 at 17:01

score 21 · Answer 4 · edited Nov 19 '15 at 00:22

21

<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!

edited Nov 19 '15 at 00:22

Daniel Sokolowski

11,982
4
69
55

answered Apr 07 '14 at 01:31

Michael Hall

331
2
3

score 3 · Answer 5 · answered Dec 10 '14 at 20:05

3

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>

answered Dec 10 '14 at 20:05

Paul

103
1

2

Out of scope of question. – Ernestas Stankevičius Dec 23 '15 at 07:56

score 2 · Answer 6 · edited Dec 08 '13 at 11:42

2

With jQuery need to use a little trick:

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

edited Dec 08 '13 at 11:42

Flexo

87,323
22
191
272

answered Dec 08 '13 at 10:44

Stan

21
1

Or just `$('#your_video_id')[0].volume = 0;`:) – NoLifeKing Feb 14 '14 at 08:13

score 1 · Answer 7 · answered Dec 28 '13 at 01:15

1

Setting the default volume, using jquery:

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

answered Dec 28 '13 at 01:15

tmpsa

19
1

score 0 · Answer 8 · answered Jul 27 '22 at 18:19

0

The React way using useCallback

import { useCallback } from "react"

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

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

answered Jul 27 '22 at 18:19

Shahriar

1,855
2
21
45

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

8 Answers8

Linked