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?开发者_运维百科

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

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.

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

P.S. Use this script for compatibility.

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

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>

With jQuery need to use a little trick:

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

Setting the default volume, using jquery:

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

The React way using useCallback

import { useCallback } from "react"

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

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