How can I place several audio tracks in an HTML5 video? - javascript

I would like to know if it is possible to have a video in mp4 without audio, and tracks in mp3, or is there any way to change the language in an mp4 with several audios?
Something like that.
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
<audio src="/test/audio.mp3" srclang="es" label="Español">
<audio src="/test/audio1.mp3" srclang="en" label="Ingles">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
<track src="subtitulos1.vtt" kind="subtitles" srclang="en" label="Ingles">
</video>

Related

How to play video and audio at the same time

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>

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

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.

Turn on close caption for HTML5 Video

How to enable default close caption for HTML5 Video
I tried this
<video id="video" src="abc.mp4">
<track src="web.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>
You need to use a <source> element or the inner of your <video> element will be ignored :
<video controls>
<source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" />
<track src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>
Video and captions taken from video.js

HTML5 video.js Player error with subtitles

I am trying to write a basic video player using html5 video tag. I used Video.js as my JavaScript. I want to play a video with its caption.
Here is the code:
<!DOCTYPE html>
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<script>
videojs.options.flash.swf = "path/to/video-js.swf"
</script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
<source src="m.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
<track src="m.srt" kind="subtitles" srclang="en" label="English" default>
<track src="m.vtt" kind="subtitles" srclang="en" label="English" >
<track src="m.srt" kind="captions" srclang="en" label="English" >
<track src="m.vtt" kind="captions" srclang="en" label="English" >
</video>
When I open this file in my browser, I see a "cc" label that must enable/disable captions; but it doesn't work at all. VLC media palyer can play the video and caption well; so there is no error in source files.
Can any body help me?

Categories