Show spinner on video end instead of play button - javascript

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.

Related

Add my Youtube playlist on my website

I add videos to my site via the JavaScript YouTube API. It works well except that at the end of the video playback, there are several video choices that appear on my screen. I want to choose the video or videos that appear at the end of my video.
How can I do this?

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.

VideoJS/HTML5 Video -Stop all videos?

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.

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!

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