How to play video and audio at the same time - javascript

I need to play a video (webm) and an audio (m4a) file at the same time on a browser that only accepts one media playing at a time (if I try to play them simultaneously on separate <video> and <audio> elements, the previous gets paused automatically).
Does anyone know what can I do?


Control the play of two media using JavaScript.
Try this:
function Players() {
var audio_player = document.getElementById('audio');
var video_player = document.getElementById('video');
audio_player.play();
video_player.play();
}
<button onClick="Players()">PLAY</button>
<br>
<br>
<audio id="audio" controls="controls">
<source src="audio.wav" type="audio/wav">
</audio>
<br>
<video id="video" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>

Related

how to download a part of video in html5 and js

I want to download or save a part of a video that is playing in my HTML and I don't want to access webcam and microphone I just need to download or play a part of a video tag in another video tag or download it ... How can I do that?... anything I saw Was accessing the microphone and webcam
<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
<source src="test.mp4" type="video/mp4" />
<source src="test.ogv" type="video/ogg" />
This browser is not compatible with HTML 5
</video>
I want a button to start recording from the video playing then I want to save it

<!DOCTYPE html>
<html>
<body>
<video id="original-video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="true" autoplay>
</video>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="false" autoplay>
</video>
<script>
const body = document.querySelector('body');
const videos = document.querySelectorAll('video[data-from]');
videos.forEach(video=>{
const originalVideo = document.getElementById(video.dataset.from);
[...originalVideo.children].forEach(child=>{
video.appendChild(child.cloneNode())
});
video.duration = Number(video.dataset.end) - Number(video.dataset.start);
video.currentTime = video.dataset.start;
video.addEventListener('timeupdate', (e)=>{
if(video.currentTime>=video.dataset.end){
video.pause();
video.currentTime=video.dataset.start;
if(video.dataset.autoreplay==="true"){
video.play();
}
}
});
});
</script>
</body>
This is the closest I could get to your requirements. You use the data attributes to specify:
the original video
the start
the end
if it should replay non-stop

How do I play a audio file that is imported with accept?

Foe example I have this code
<input type="file" id="thefile1" accept="audio/*" />
I want to play this audio by using javascript. How can I do?

You can do this in one of two ways. Since you asked for JavaScript, you just want so set autoplay to true. The second way would be to do the same but set autoplay="true" on the video element itself.
In your case, if you don't want autoplay, you just need to run .play() on your video element.
Just to Play the Video
document.getElementById('playButton').addEventListener('click', (e) => {
const video = document.getElementsByTagName('video')[0];
video.play();
});
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
Autoplay options
JavaScript Option
const video = document.getElementsByTagName('video')[0];
video.autoplay = true;
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Option
<video width="320" height="240" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

How to play video in HTML page

I am trying to play a mp4 video on my HTML page, I have searched the web and found that in HTML5 I can do this with video tag like this below
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Issue I am facing
My main issue is my video is stored in my local computer in some location, So how can I call that from that path
In my system it is located in D drive so I want to call it from there
I am new to this so I don't know if I am doing it the right way; is my approach correct?
My requirement is to auto-play video on my web page
I am doing like this
<video width="320" height="240" autoplay>
<source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>
D:\Video\samplevideo.mp4 is the path of my file and samplevideo.mp4 is the name of the video
On Chrome it show error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4
And on Firefox All candidate resources failed to load. Media load paused.
Edit
My main focus is to play video on webpage.
I need to play a video on the web (HTML page) when page is loaded I have that video in my system at D:\Video\samplevideo.mp4 this path, how can I play that video when page is loaded.

Try this Code
<video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
<source src="video/movie.webm" type="video/webm">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
</video>

I can give you some pieces of advice.First,you can use the absolute path about video,place the video file on the server,then you can get a path such as www.xxx.com/movie.mp4,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="www.xxx.com/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Second,you can place your video file on the directory as same as the HTML page location.For example,if your HTML page in the directory which called test.you can create a directory which called src,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="./src/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Third,you can use the input tag to upload the local video file,the HTML code as below:
<input type="file" id="myInput"/>
<video controls autoplay></video>
the js code as below:
var input = document.getElementById('myInput'),
video = document.getElementById('myVideo');
input.onchange = function () {
var file = this.files[0];
var url = URL.createObjectURL(file);
video.innerHTML = '<source src="' + url + '" type="video/mp4">';
}
Fourth,use the object tag.you can write the code,like this:
//the HTML code
<div id="playhere"></div>
//js code
function play(fn){
var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
play('D:\\Video\\samplevideo.mp4')
but that way isn't supported on chrome browser.
Excuse me,I'm new to speak English.

Can you try this
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Also follow this link for more info.
http://mrbool.com/how-to-add-and-play-videos-in-html/26171

For the very basics of getting this working move D:/Video/samplevideo.mp4 to the same location as your html file.
Then change your code to:
<video width="320" height="240" autoplay>
<source src="samplevideo.mp4" type="video/mp4">
</video>
Make sure Tomcat is set up to server the .mp4 mimetype or extention.
Next you should read up on how paths work in HTML.

you need to put an alternative text like this to check of your browser or smartphone supports video autoplay.
like this:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```

How to pause specific HTML5 audio when playing HTML5video

Reference http://america.wtf/Shadex
The site has audio that auto plays. However there is a videos page. I want to have it so that when you play the videos it auto pauses the music
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var video = document.currentScript.parentElement;
video.volume = 0.1;
</script>
</audio>

see below for updated sample which will:
Pause the audio when you play the video
Play the audio when you pause the video
note the I removed the onClick from the video element, and also added an explicit id to the <video> element to make directly referencing it easier
<div id="videos" style="z-index:1"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls id="video">
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var audio = document.currentScript.parentElement;
audio.volume = 0.1;
var video = document.getElementById("video");
// this event listener reacts to "play" happening on video element and enacts pause on the audio element
video.addEventListener('play', function (){document.getElementById("sitemusic").pause()},false);
// this event listener reacts to "pause" happening on video element and enacts play on the audio element
video.addEventListener('pause', function (){document.getElementById("sitemusic").play()},false);
</script>
</audio>

html5 audio do not support in mobile

This is my code this audio format does not work in mobile please help me how to work audio in mobile browser
<html>
<body>
<audio autoplay loop id="myVideo" width="320" height="176">
<source src="wedding.ogg" type="audio/ogg">
<source src="wedding.mp3" type="audio/mp3">
</audio>
</body>
</html>

<audio id="blast" src="blast.mp3"></audio>
<audio id="smash" src="smash.mp3"></audio>
<audio id="pow" src="pow.mp3"></audio>
<audio id="bang" src="bang.mp3"></audio>
<!-- Background Track -->
<audio id="smooth-jazz" src="smooth-jazz.mp3" autoplay></audio>
Then say you have a gun trigger with a class of blasterTrigger:
Shoot!
You could then use the Javascript API to control the playing of the blast sound when the trigger is clicked like so:
var blasterTrigger = document.querySelector(".blasterTrigger");
blasterTrigger.addEventListener("click", function(){
document.getElementById("blast").play();
});
Source of above code
OR
You can use some HTML5 Audio / Video Library:-
jplayer
mediaelementjs etc.

Categories