Video autoloading - javascript

I'm running a projet of video galery. My problem is I want to the use the YouTube system so that when I click on a video in the list of the galery it appears in the main space and start playing (exactly what happens in YouTube). How can I do this please ?
Thanks

firstly, get the youtube api and a fetch method to get the videos,
now loop through the data returned and present it in the manner you want it. write a play method that will open a selected video on a play canvas, this is how I think you can implement what you want in bare design thinking. I dont know what technologies you're using, in my free time I'll write an example implementation in vue.js or react.js

Related

Audio element play promise rejection even while audio context is in running state

I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.

YouTube Player API: getDuration(), getCurrentTime(), getVideoData() not working

For my application, I am trying to use the YouTube Iframe player API to play videos, and allow the user to change videos without reloading the page.
I accomplish this by using the player.loadVideoById(video_id) method. After loading the video via YouTube video id, I also want to capture all relevant information about the video. However, I notice that none of the get functions work right away, including getDuration(), getCurrentTime() and getVideoData().
I have found a scrappy solution of using a setTimout to get the information about 1-2 seconds after using player.loadVideoById(video_id), however, I do not think this is the proper solution.
It seems to me that loadVideoById(video_id) is asynchronously fetching the data from YouTube. Is there a callback function available to use? I could not find one in the docs. Please help.
Thanks!
There are quite a few Events available that you can utilise I think.
Here is an example of tracking YT.PlayerState.PLAYING state, falling within the onStateChange event, which is basically saying that the video is currently being played.
player.addEventListener(YT.PlayerState.PLAYING, onVideoPlaying, false);
function onVideoPlaying() {
console.log('currentTime:', player.getCurrentTime(), 'duration:', player.getDuration());
}
Hope this helps.

Embedded youtube videos - Simply play a video without audio?

Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.
For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.
I would use
event.target.mute();

Any Js which can detect flash video lenght and show play again and next video

I am wondering is there Java Script library or script or any trick which can detect flash video length and show play again and next video after its end.
As YouTube do.
any reference example or tutorial can also help me.
I am here after Google.
What you really want is the flash video player to make an ExternalInterface call to javascript letting it know it has completed. You would need access to the flash file to accomplish this.
You could technically track the video play progress with javascript and load the next video on complet. The problem with this is that it would require you not only to know the length of the video, but also when it plays/stop. The only way to do that is by having flash make ExternalInterface calls. At that point, you might as well just listen for the video's complete event.

Controlling playback of multiple Youtube Videos with the Youtube JS api (playing at the same time)

I know that there's a very similar topic for this question, however I'm trying to do something a little different.
all of this is a little new for me... sorry...
Basically I'm trying to play multiple YouTube Videos in one page at the same time (mash up style) using YouTube API and JS
the thing is i want to control each of them separately, while they all playing. i found the code that is close to what i want. the thing is that the videos cannot be played together, once you hit play on a video the other one stops.
how can i control them separately, and still have the other videos playing in the background and not being influenced ?
here's the code i found on another topic
Thanks in advanced,
Maayan
The YouTube code playground has an example for this.

Categories