We Keep Coding

How to bing click/mousedown events for HTML Audio element

In the below shared stackblitz example, i have bound mousedown and click event for the audio element wrapper which is not triggered. I need to perform my own action, with audio element click being performed.
Couldn't find any solutions for this case, any thoughts over this is appreciated.
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<br>
</span>
<script>
document.querySelector('#test').addEventListener('click', function() { console.log ('click called')});
document.querySelector('#test').addEventListener('mousedown', function() { console.log ('mousedown called')});
Sample: https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js
Any suggestions on this, to achieve this behavior. Couldn't find any suggestions regarding this in the MDN too (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).

Tried the below way of wrapping inside the figure HTML element, which is an alternate solution instead of wrapping a separate element above the audio element. Those who want to wrap the audio elements within a inline/block nodes.
```css
figure {
display: block;
outline: none;
position: relative;
margin: 0;
padding: 0;
}
figure:after {
position: absolute;
content: "";
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: default;
display: block;
background: transparent;
}
```html
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</span>
Sample: https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js
Above sample makes the mousedown and click action work for the audio element.
Hope it helps someone..!

According to w3School, you can use the onplay attribute to read whenever the audio/video has been started or is no longer paused
<audio onplay="myFunction()">...</audio>
Instead, (I do not suggest to use this solution) if you would like to acces the mouse events, you can place an invisible div over the audio element:
<script>
function catchClick(){
alert("hi");
}
</script>
<div onclick="catchClick()" style="position:absolute;z-index:1;width:300px;height:30px;">
</div>
<audio controls>
<source src="/url/track.mp3" type="audio/mpeg">
</audio>

video tag loadedmetadata event don't apply to multiple video tag

In a single html page there are multiple video tags and all these videos may be played simultaneously. I have build an application where I am capturing video using webrtc and video capture device. These video are not seekable.
So I am calling below code for each of those video tag so that video which are playing can be seekable.
This code works fine if I apply to only one tag but when I apply it for multiple video tag it wont work.
$scope.addListenerVideo = function(videoSrc) {
var videoSrcVar = document.getElementById(videoSrc);
if(videoSrcVar !=null) {
videoSrcVar.addEventListener('loadedmetadata', () => {
if (videoSrcVar !=null && videoSrcVar.duration === Infinity) {
videoSrcVar.currentTime = 1e101;
videoSrcVar.ontimeupdate = function() {
videoSrcVar.currentTime = 0;
videoSrcVar.ontimeupdate = function() {
delete videoSrcVar.ontimeupdate;
};
};
}
});
}
}
html code sample:
<div class="row">
<div class="first-column">
<video width="636" height="380" controls preload="auto" ng-show="actStatus_1" id="demoVideoSrc1" style="border: 1px solid black; margin-top: 10px; margin-left: 10px; "></video>
</div>
<div class="second-column">
<video width="600" height="380" controls preload="auto" ng-show="actStatus_2" id="demoVideoSrc2" style="border: 1px solid black; margin-top: 10px; margin-left: 149px;"></video>
</div>
</div>

Here I switched to mozilla firefox. There is issue with the way video capture in chrome which is not allowing video to be seekable. I don't know whether I was missing something or not. Once I switched to Firefox browser there was no issue with seeking video.

Swapping video tags is making the entire div empty

I am using JANUS to stream the video.
I have 2 div tags, one which is bigger than the other and I'm keeping an option to swap the elements. These div tags contain the video tags.
I have 2 video tags, one in which local video is being streamed and another in which the remote video is being streamed.
The following is the function I've attempted.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").html();
var remoteVideo = $("#videoremote1").html();
console.log(localVideo);
$("#videolocal").html(remoteVideo);
$("#videoremote1").html(localVideo);
}
I can see that in the html on inspecting, The video tag is present in the desired div but the video goes completely blank. The complete div looks empty. Is this the case with video tags in general? Is there an approach to do it?

So my thinking is that the object your writing to could be updating the reference. This is why the JQuery clone() function comes handy to remove reference from the original object.
Check out the following code snippet.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").clone();
var remoteVideo = $("#videoremote1").clone();
$("#videolocal").html(remoteVideo.html());
$("#videoremote1").html(localVideo.html());
}
.green {
height: 50%;
background-color: green;
padding: 10px;
box-sizing: contain;
}
.red {
height: 50%;
background-color: red;
padding: 10px;
box-sizing: contain;
}
.swap-button {
float: right
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="swap-button" onClick="swappingVideoFunction()">Do Swap</button>
<div id="videolocal">
<video class="red" width="320" height="240" controls>
<source src="local.mp4" type="video/mp4">
<source src="local.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div id="videoremote1">
<video class="green" width="320" height="240" controls>
<source src="remote.mp4" type="video/mp4">
<source src="remote.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

Can't pause video on closing popup

The problem is that, when I close the popup without pausing the video, the audio keeps playing. I cannot pause the video while closing the popup. The complete code is give below.
//html code
<style>
.yourModalClass {
padding: 0 1.5em 1em;
border-radius: 5px;
max-width: 380px;
color:#fff;
}
.yourModalClass a {
color:#fff;
}
</style>
abc
<div id="yourModalId" class="yourModalClass" style="display:none; margin-left: -20%; margin-right: 20%">
<h2>abc</h2>
<video width="600" height="400" controls="">
<source src="abc.mp4" type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
<script>
$('#yourModalId').modality({
effect: 'slide-up'
});
</script>
//javascript
/* #author: Himanshu Kandpal (cse10324.sbit#gmail.com)*/
;(function(e,t,n,r){var i="modality",s=e("body")[0],o= {autoBind:true,clickOffToClose:true,closeOnEscape:true,effect:"",innerClass:"mm-wrap",modalClass:"modality-modal",onClose:"",onOpen:"",openClass:"mm-show",openOnLoad:false,userClass:""},u=function(t,n){var r=this;r.defaults=o;r.id=e(t).attr("id");r.settings=e.extend({},o,n);r.$modal=e(t).wrap('<div class="'+r.settings.modalClass+" "+r.settings.effect+" "+r.settings.userClass+'">'+'<div class="'+r.settings.innerClass+'">'+"</div>"+"</div>").show();r.$wrapper=r.$modal.parents("."+r.settings.modalClass);r.$triggers=e('a[href="#'+r.id+'"], [data-modality="#'+r.id+'"]');if(r.settings.autoBind){r.$triggers.each(function(){r.setTrigger(e(this))})}if(r.settings.clickOffToClose){r.$wrapper.click(function(e){e.preventDefault();if(e.target==r.$wrapper[0])r.close()})}if(r.settings.closeOnEscape){e(s).keyup(function(e){if(e.keyCode==27)r.close()})}if(navigator.appVersion.indexOf("MSIE 7.")!=-1){r.$wrapper.prepend('<div class="mm-ghost"></div>')}if(r.settings.openOnLoad)r.open();return r};e.extend(u.prototype,{open:function(e){this.$wrapper.add(s).addClass(this.settings.openClass);if(typeof this.settings.onOpen=="function")this.settings.onOpen();if(typeof e=="function")e();return this},close:function(e){this.$wrapper.add(s).removeClass(this.settings.openClass);if(typeof this.settings.onClose=="function")this.settings.onClose();if(typeof e=="function")e();return this},toggle:function(e){return this.isOpen()?this.close(e):this.open(e)},isOpen:function(){return this.$wrapper.hasClass(this.settings.openClass)},setTrigger:function(e){var t=this;e.click(function(e){e.preventDefault();t.toggle()});return t}});e.extend(u,{instances:{},init:function(e,t){var n={},i=this,s=0;e.each(function(){var e=new i(this,t);i.instances[e.id]=n[s]=e});return n[1]===r?n[0]:n}});e[i]=u;e.fn[i]=function(t){return e[i].init(this,t)}})(jQuery,window,document);

add id to the video controler element
call after slide up
$('#videoID')[0].pause();
$("#videoID")[0] will return you the DOM element not the jQuery object as the pause method is not the jquery method its the DOM method

Controlling Multiple Embed Videos In A Single Page

I have multiple embed videos from different sites (Youtube,Vimeo, Dailymotion etc..) on a single page. I would like to give the user a central control panel similar to any desktop media player with pause, play, next video, prev video and volume control.
How can i achieve this ? Is it even possible ? I know Youtube has an api but what about other websites ? Is there a common API for all of them ?
Thanks

http://jsfiddle.net/sumanP/rzeb23aq/1/
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player1st;
var player2nd;
function onYouTubePlayerAPIReady() {
player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}});
player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
}
//function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }
function onPlayerStateChange(event) {
alert(event.target.getPlayerState());
}
</script>
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&enablejsapi=1"></iframe><br>
play1st<br>
pause1st<br>
stop1st
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&enablejsapi=1"></iframe><br>
play2nd<br>
pause2nd<br>
stop2nd