I'm trying to add videos to a media source in javascript following this example.
I added the below to the original javascript file, after line 44
//Original file
sourceBuffer.appendBuffer(clipsToAppend[clipIndex]);
//Added
$("button").click(function(){
sourceBuffer.appendBuffer(vid);
})
What I was expecting was to be able to add videos by button click but what happens is that the original videos are added and play, but when I click the button to append, it adds the time to the video seeker (if the video is 5 seconds for example, and original videos add up to 20, clicking the video 4 times will 20 seconds, so 40 seconds total) but the video stops playing at the original 20 second mark with a loading symbol. I know that the problem isn't with the videos because I've tested them all in the original appendBuffer and they work just fine.
Also, is there a way to continue to add video before it reaches the end? I was thinking of using a settimeout unless there's a better way.
Related
I'm fading in a video when my page loads, and I'm looking for an idea on how to combine oncanplaythrough with settimeout in a way that the video starts to fade in as soon as possible, but not less than 2 seconds - so other elements on the page can fade in before the video, even if the video loads in faster.
I've been using the following and my assumption was that the video will take some time to load in, but it actually usually loads in even faster than 2 seconds, so it is not ideal for the order of elements on my page to fade in:
document.getElementById("v0").oncanplaythrough = function() { document.getElementById("v0").classList.remove('fade-in-vid'); };
if the video is not loaded yet and the fade in starts after the 2 seconds, that is fine, but I also want to avoid it waiting an additional 2 seconds if the video can play through already - so I need to check if it can already play through after the 2 seconds wait time - if so, start fading it in immediately.
any ideas? vanilla js only please.
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!
I am using Brightcove for my videos, however, I need to be able to click on a selection of buttons to go to specific timestamps within the video.
I have found how to deep-link (https://support.brightcove.com/deep-linking), but this is to start a video at a specific point, rather than change the time of an existing or playing video.
I need to be let the user click on links like this (as an example):
Go to 60 seconds
Go 5 minutes
Go to 20 minutes
Clicking on any of those links will update the video.
Please help! Thank you.
Use the player API
myPlayer.currentTime(60);
I know that i'm asking 2 questions but I'm looking for a simple solution for apparently a simple thing.
I want a video from youtube to loop and to show no controls/title/logo.
This is what i found so far.
For the loop : youtube recommends setting loop=1 and playlist=video_id. It works and it doesn't in the same time. Why, because the video is reloading over and over again, a loading screen appears every time the video is loaded, it takes so much bandwidth.
I found a website endlessvideo.com , it works so smooth but i don't know how they do it.
And for the controls and logo, i want them hidden. If i'm using modestbranding=1 and controls=0, a title appears.
If i'm adding showinf=0, the logo appears on mouseover the video.
Is there a way to override this?
Thank you.
Add below options to your link
src="//www.youtube.com/embed/VIDEO_ID?
iv_load_policy=3&
loop=1&
playlist=VIDEO_ID&
controls=0"
iv_load_policy setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown. The default value is 1.
loop setting the parameter's value to 1 will create a loop, default (stop at the end) value is 0.
controls this parameter indicates whether the video player controls are displayed. For IFrame embeds that load a Flash player, it also defines when the controls display in the player as well as when the player will load. Set its value to 0 to not display controls in the player. For IFrame embeds, the Flash player loads immediately.
Source
I would really like to have clickable time links on my website that will jump to specific times within my embedded youtube video. I know that this is possible within youtube itself (built in function on youtube where you just put the time you want in the format (0:00) and users can click it to jump to that point).
I was wondering if it is possible to mimic this function somehow with embedded youtube videos and javascript?
You can use the Youtube iFrame API. There is a function to get the current timestamp:
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
Use them like so:
ytplayer = document.getElementById("youtube_player");
ytplayer.getCurrentTime();