VideoJS/HTML5 Video -Stop all videos? - javascript

I am using VideoJS's WordPress plugin (http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/) to display self hosted videos on a website. Videos are listed in a gallery and each video opens in a modal window when clicked. This is working great, but when the modal window is closed, the video continues to play in the background.
Is there a way to stop or terminate all HTML5 videos on a page using jQuery? My thinking is that I will run this "stop" function (if it exists) when a modal window is closed.
Thanks.

Related

Pause/Stop Microsoft streams embed video in html page on model close

I have Microsoft stream video iframe embed on html page pop-up modal. The video is displayed on Modal pop-up when a button is clicked and plays with default controls. When i close the modal pop, the video still runs on the background. I need to stop/pause the video when the modal pop-up is closed. I have tried with JavaScript video pause scripts but nothing works out. Streams runs with Azure player, Any suggestion to control the video with JavaScript

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!

Video to full modal

I am inserting YouTube videos in my website with iframes and I need to make the video almost full screen and the background white (like a full screen mode). I know how to make both, but I cant move the video with javascript from his container to a new one without stoping so how can i do it?
Thanks for your time
This works if you're using Bootstrap. I think you should be able to use it if you arent using Bootstrap too.
YTModal helps you play Youtube videos in a popup window based jQuery and Twitter Bootstrap modal component. It also requires jQuery YouTubeDefaultImageLoader.js to insert Youtube video iframes with post images into your web page
http://www.jqueryscript.net/other/Youtube-Video-Modal-with-jQuery-Bootstrap-3-YTModal.html

Show spinner on video end instead of play button

I have developed a video playlist for a Drupal site. My question is: Is it possible to show the spinner instead of the big play button on every video ending(through Javascript), until the page containing the next video of each list is loaded? The videojs version that's used is 2.0.2.

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.

Categories

Resources