Develop Reference

How can i pause dynamically appended videos?

I am making a project using jquery in which a chat thread has to be created, i am having the following code in my project that pauses all the videos except the one that is playing. This works totally fine until and unless i append a new video in my chat thread.
$("video").on("play",function(e)
{
var $allVideos = $('video');
$allVideos.not(this).each(function()
{
this.pause();
});
});
For example, i am currently playing a video in a chat thread and i am going to upload another video, while i am on the preview div inside bootstrap4 modal that autoplays the video, the one currently playing in the chat thread pauses and the one inside the preview div starts playing automatically. But when i append this preview video in my chat thread and trigger play buttons on this just appened video and the previous video that was paused, they both start playing simultaneously despite of the fact that i am having the code to manage this.
I see i need to pass some selector with on method like
$("body").on("play","video",function(e){});
but then i can't use this keyword in my code because now it refers to the body instead of the video.
How do i fix this problem? Thank You In Advance!

How to generate a thumbnail image after adding a video inside an input type=“file” in a form

I am creating an ionic framework app (angular) that will upload videos to a back-end service. I would like to show a thumbnail of the video selected ( or just taken by the mobile device ) on the form before user submits. I have found many useful examples to do this for images, but not videos. Any advice?

Using jQuery Galleria how can one subscribe to a Youtube player ready event?

Galleria has a bunch of useful API functions (http://galleria.io/docs/api/events) but none of them appear to allow you to detect when a Youtube video player iFrame has successfully loaded.
The previous version of Galleria did not support video posters and so any YT videos in the gallery were automatically embedded into a slide when it was shown. Using the 'image' event (http://galleria.io/docs/api/events/#image) I could then detect if it was a video and hook into the YT player API.
Now that the video is initially a poster I cannot figure out how to detect when the player has loaded (after hitting the poster's play button) in order to manipulate it.

How to streaming video conferencing using webRTC

I am creating a simple video conferencing application using webRTC.
Find source code here
When I click on the "Setup New Meeting" button, then video streaming start and show new hyperlink like:
When I click on it a new tab opens with video streaming in this tab and both tabs capture video and in both tabs video conferencing is working.
See the below image:
In this image you'll the the list of cameras attached to a user's computer. I would like to do the following:
When I select any camera from the list it will be load in the
appropriate <Section>
When I click on <Camera 1> it will be load in Local Media Stream of user side and other side it will display in Remote Media stream
When I click on <Camera 2> it will be load in Local Media Stream of user side and other side it will display in Remote Media stream
What is the best way to go about achieving this?

HTML5, Video and Javascript: using video timeline to control page behavior

I'm having the following problem: i have to show a video inside a page, but it needs to alternate with page content. Everytime the video stops playing, i have to show a div or something. After a few seconds, that div goes away and the video starts playing again. Alternating between normal content and video.
Is this possible with HTML5 and JS? Any ideas on how to do it?

Consider implementing Popcorn.js. It's part of Mozilla's Popcorn project.
The demo on the front page shows a div with changing HTML content depending on the time code of the video.
Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web

Bind an event when the video stops (addEventListener( "ended", function(){ ... }, false)) to show the div, start a timer after which the div hides and video starts playing again.