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

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.

Related

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.

Pausing a You Tube video when the page is hidden

I have created a site where instead of "pages" i have created divs that show/hide on different menu clicks using the code below.
The only issue is the You Tube videos on one of the pages, when the user plays the video they then have to stop it otherwise the video continues to play when visiting other pages.
Is there a way to pause the video when the user leaves the page or to just stop the video outright when clicking on another content.
Here is the code for the page navigation
$('#homePage').show();
$('.nav').click(function () {
$('.page:visible').slideUp('slow'); // or .hide()
$($(this).data('target')).slideDown('slow'); // or.show()
})
Any help is greatly appreciated
Hi this page should help a lot. https://developers.google.com/youtube/iframe_api_reference. You are just going to 'wrap' the video in the youtube Api and use their events and methods already tied to it.
Basically what you will need to do is when the div is closed or a button to x out of the video is clicked you will need to do something like this.
$("#myDiv").click(function () {
player.stopVideo();
});
One thing to note is that if you are going to be hidding the showing the div that contains the Iframe you will need to re-add the player everytime it is shown or you will lose your events that are tied to it. I hope this helps.

How to detect if video is currently playing in page without using youtube/ggole api

Situation: I have a page that shows a stream of posts (news) submitted by our members. I have a setInterval() in this page that causes it to refresh every x seconds - if user is idle for x seconds.
Recently I have added video posts where user can click on an item and video would begin to play immediately in the page (so far I'm only using youtube iframes).
The problem: my auto refresh sometimes refreshes the news content while user is watching a video and being "idle"... which causes video to close and content to reset...etc. Meaning, user will loose his/her position in the video and have to start over.
My question: how do I detect if this page has at least one video that is currently "playing"? I'd like to use this to decide if auto refresh should occur or not.
Note: I'm not currently in favor of using the custom player or google/youtube js api because soon I will be adding support for videos from other services such as vimeo, 56.com...etc.
Question rephrased: is there a "universal" javascript or jquery method to detect if a video is currently playing in the document or window?
Thank you!

Categories

Resources