We Keep Coding

how to capture the event when html video tag is unmuted?

I want to check if user has unmuted or muted the video. I am using video html tag.
Is it possible to detect if user has unmuted or muted the video?

You can use Javascript to capture that event.
var video = document.querySelector('video');
video.addEventListener('volumechange', function () {
console.log('muted', video.muted);
}, false);
<video controls autoplay muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

How do I create 2 video tags without showing 2 videos?

I'm trying to figure out how I can make reference to specific videos for 1 video tag and create another video tag without any videos in it so my variable knows it's a video. Problem with that is it creates a second blank video.
<video id="videoTag1" controls>
<source id="mp4_src" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4 " type="video/mp4">
<source id="mp4_src" src="movie.mp4" type="video/mp4">
</video>
<video id="videoTag2" controls>
</video>
How would I make reference that something is a video without using another video tag or switch to the 2nd tag without a blank second video popping up?

Just change the src in javascript:
// Some example videos
const srcs = [
'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',
'https://preview.redd.it/47zk247yufg31.gif?format=mp4&s=21e1fc3ab5d02d77762094026716fe5ae6fce0dc'
];
let video = document.getElementById('video');
let source = document.createElement('source');
// Set the inital video src and play
source.setAttribute('src', srcs[0]);
video.appendChild(source);
video.play();
let i = 1; // current index for example
// Update src and play
function changeVideo() {
i = i ? 0 : 1;
video.pause();
source.setAttribute('src', srcs[i ? 0 : 1]);
video.load();
video.play();
}
<video id="video" controls>
</video>
<button id="changeSource" onClick="changeVideo()">Change video</button>
Hope this helps,

Make the second video visibility set to hidden.

You can hide second video tag.
<video hide="true" id="videoTag2" controls>

How to avoid audio loop lag in javascript?

I'm trying to get a sound looped on html 5. The sound.loop = true; works, but when the sound get finished, there's a silence between looping. How can I avoid that? Thanks a lot, here's the code:
<audio id="ruido">
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var sound = document.getElementById("ruido");
sound.loop = true;
sound.play();
</script>

You could use a JavaScript function to loop when an 'ended' event is called.
<audio id="loopMe" controls preload>
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
</audio>
document.getElementById('loopMe').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
Or better yet try the SeamlessLoop library, Reproduce seamless/gapless audio loops on HTML5/JavaScript without specific browser Audio APIs.

HTML5 video redirection

Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.
Here's the code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>

Since it looks like you're using Video.JS for this, you should have a look at their docs:
https://github.com/videojs/video.js/blob/master/docs/index.md
Specifically, the API section:
https://github.com/videojs/video.js/blob/master/docs/api.md
In the "Events" section, it says:
ended
Fired when the end of the media resource is reached. currentTime == duration
So you'd need to get a reference to your player (also on that page):
var myPlayer = videojs("example_video_1");
and then listen for the ended event, and redirect from there:
function endedFunction(){
window.location = 'http://www.example.com/';
}
myPlayer.on("eventName", endedFunction);

As borrowed from this answer, try the following. And you don't need video.js for this.
HTML
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
JavaScript
<script>
var video = document.getElementsByClassName("video-js");
// Or select element by HTML tag
// var video = document.getElementsByTagName('video')[0];
video.onended = function() {
window.location.href = "www.yoururl.com";
}
</script>
Ought to work.

How to get HTML5 audio duration time when the audio is paused

I am new on HTML5, What I want to do is get the audio duration time when I click the pause button
here is my code
<audio controls="" id="audio">
<source src="assets/record_file/abc.mp3" type="audio/ogg">
<source src="assets/record_file/abc.mp3" type="audio/mpeg">
Your browser does not support the audio element. Please try other latest browser
</audio>
any idea how to do it ?
thanks

document.getElementById('audio').pause = function() {
var currentTime = document.getElementById('audio').currentTime;
var duration = document.getElementById('audio').duration;
alert(currentTime);
};
Please check HTML Audio and Video DOM Reference, describe all methods, properties and events.