0

I want to change the audio track of a video that I am playing in html. This is my sample code.

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
</head>
<body>
<video controls playsinline autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>

Inside the same folder, I have an audio.mp3. I don't want to mute this video and append a hidden player and play both separately, basically I want to change the audio source. If anyone has done it, please guide me or let me know in which direction should I search? Thanks.

Ali Zia
  • 3,539
  • 3
  • 23
  • 63
  • Well I searched it for 2 days and then I posted this question. It's very easy to criticize :) @RoryMcCrossan – Ali Zia Nov 29 '19 at 10:48
  • I have to change the audio src of a video. Not audio src of an audio. – Ali Zia Nov 29 '19 at 10:49
  • In which case I chose the wrong duplicate, it should have been [this](https://stackoverflow.com/questions/54099199/playing-multiple-audio-tracks-on-video-element). Note that it's not widely supported and you don't have much of an alternative. – Rory McCrossan Nov 29 '19 at 10:51
  • I reviewed this solution and it said not compatible with most browsers. @RoryMcCrossan – Ali Zia Nov 29 '19 at 10:53
  • That's correct. Multiple audio sources are not well supported on the web. As I said, there's no real alternative, other than using separate video/audio elements, but you could easily run in to synchronisation issues. – Rory McCrossan Nov 29 '19 at 10:54

1 Answers1

0

I don't think that you can change the source of the audio only in your video tag.

So yes, the hack of having the video muted and a hidden audio would probably be the simplest solution.

The best one would certainly be to rebuild your video, server-side, using the audio source you want for that video.

I'd use ffmpeg for that : https://superuser.com/questions/1137612/ffmpeg-replace-audio-in-video

Loïc
  • 10,366
  • 1
  • 26
  • 42
  • Is there any method with using ffmpeg? :) – Ali Zia Nov 29 '19 at 10:53
  • 1
    No, ffmpeg is a program that runs on your server, it is made to build videos (with other things). The idea is that you should build a new video, using the video source and audio source of your choice, and serve that to the client browsers. So that on the client side, you can serve the video with the "good" audio, using only the – Loïc Nov 29 '19 at 10:55
  • Well I understand that. I was hoping I could do it somehow using plaing js / jquery. – Ali Zia Nov 29 '19 at 10:57
  • on the client side, the only way I can think of is the one you've already found; muting the video and having an hidden – Loïc Nov 29 '19 at 10:58
  • 1
    Well yeah. I think I will be using ffmpeg. But I just wanted the opinion of others before making sure it wasn't possible. – Ali Zia Nov 29 '19 at 10:59