CODEWITHSUNDEEP
javascripthtmlcssaudiovideo
Social XD
Social XD

Reputation: 3

How can I play audio externally with video in html?

How can I play audio externally with video in html?

For example:

<video controls="controls" style="margin-bottom:20px;width:590px">
<source src="https://drive.google.com/uc?export=download&amp;id=1MQMkk7BUzx5K4vYt5s5GXUXTiVLAd20q" type="video/ogg" /> 
<source src="https://drive.google.com/uc?export=download&amp;id=1r9HFQeSUjE2InM7LOuNx7qaMzaVkQNfF" type="video/mp4" />
</video>

The .ogg file here is an audio file and the .mp4 is a video file When users click on the play button I want them to see the video but for the audio to come from the .ogg file

NOTE: .mp4 file have its own audio but I don't want users to listen to that audio I want them to listen to the external audio from .ogg file

Upvotes: 0

Views: 681

Answers (1)

Laraib Aslam
Laraib Aslam

Reputation: 15

That's Your Code:

<video controls="controls" style="margin-bottom:20px;width:590px">
    <source src="https://drive.google.com/uc?export=download&amp;id=1MQMkk7BUzx5K4vYt5s5GXUXTiVLAd20q" type="video/ogg" /> 
    <source src="https://drive.google.com/uc?export=download&amp;id=1r9HFQeSUjE2InM7LOuNx7qaMzaVkQNfF" type="video/mp4" /> 
</video>

Give Your Video and Audio Tags "id" attribute

<video id="video" controls muted>
    <source src="https://drive.google.com/uc?export=download&amp;id=1r9HFQeSUjE2InM7LOuNx7qaMzaVkQNfF" type="video/mp4" />
    <audio id="audio" controls>
        <source src="https://drive.google.com/uc?export=download&amp;id=1MQMkk7BUzx5K4vYt5s5GXUXTiVLAd20q" type="video/ogg" />
    </audio>
</video>

And Write Script

<script>
    var v = document.getElementById("myvideo");
    var a = document.getElementById("myaudio");
    v.onplay  = function() {
        a.play(); 
    }
    v.onpause = function() {
        v.pause();
    }
</script>

That's all. Actually, What's happening here is that when your video will be played than your audio file will be played simultaneously and whenever your video will be paused than your audio will be paused also. At the same time, your video will be muted all the time.

Upvotes: 1

Related Questions