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!
Related
I have a website with embedded YouTube videos. I'm using the YouTube player API to embed my videos, and the player is set to autoplay when the page loads. I've set a listen event to redirect to the next video once the current embedded video has finished playing (I need to redirect to a new physical page rather than load the next video into the existing iframe created by the API as each page contains information/comments specific to that video).
This all works perfectly, but only if you have the tab open. If you're listning to the videos in the background (they're just audio recordings set to a static image, there's nothing to actually watch), the page will redirect fine after the current video finishes, but the YouTube video will not start playing until you click into the tab. As soon as you do click into the tab, the autoplay kicks in and the video starts. But I need the videos to play automatically whether the tab is open or not. Any ideas?
I've experimented with JWplayer, and the redirect/autoplay works perfectly, but that would mean having to host the videos myself, and I'd rather host on YouTube. I've also noticed that YouTube.com doesn't have this problem. It will load the next video page in a playlist and autoplay whether the tab is open or not.
This problem only occurs in Chrome, Firefox and Opera, but not in Edge or IE.
Thanks.
<div id="yt-player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady(){
player = new YT.Player('yt-player',{
height:'433',
width:'770',
videoId:'xxxxxxxxxxx',
playerVars: { 'autoplay': 1, 'controls': 1, 'html5': 1 },
events:{
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event){
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0 && $("#autoplayCB").is(':checked')) {
window.location="/nextvideo.htm";
}
}
</script>
I've come across this problem. I found that you must create the player first, then to change the video you use loadVideoById.
https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions
The problem here is that you must make the list of videos yourself, or find some way of getting the list of videos into a javascript array and call the next one when the current video ends. You will need to build a manual playlist.
The only other caveat is that you must let the video load the first time you're on the page, opening it in a new tab without giving the tab focus will prevent it from initialising until you do so.
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.
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.
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!
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.