Pause youtube and vimeo programatically and detect if a video is playing - javascript

I have a slider which allows video embeds ( currently by pasting in iframe code from youtube/vimeo etc). The problem I have is that the video needs to pause the slider when the user clicks the video play button and also pause the video when the slider moves to the next frame.
It seems that I will need to use the vimeo and youtube API's to get access to the information and control I want. I have looked through the API's and I think I can probably get this happening; however my problem is that from what I've seen so far the youtube API tends to work off the video ID, whereas the Vimeo API seems to work with iFrames, but I need to have a consistent input for end users in that I want to say "Paste the video ID here" OR "Paste the Iframe here" OR "Paste the video URL here" ... I don't want to have to ask them for an ID from youtube for one video and an Iframe from Vimeo for the next one.
I know how to manipulate the data to make the two consistent but I'd rather avoid that if at all possible. What is the best approach to get programatic access to Youtube and vimeo so that I can achieve access to play and pause and know whether a video is playing or not.

there is a small widget on https://github.com/dachcom-digital/jquery-video with which you can archive the things you're asking for.
You can ask the user for the video ID and render some HTML container. Then you apply the widget and can pause, play, etc. the videos with one consistent API.
Hope this helps.

Related

How to hide a YouTube video informations (title, etc) when playing the video in an iframe?

I want to embed a YouTube video in a web page, without showing the title of the video.
However, according to the YouTube Frame API, since 2018, the showinfo parameter isn't sufficient for that, as even when it is set to 0, the title of the video will still be showed when playback starts.
It is still possible to completely hide the title of the video, as online quiz website Kahoot ( https://create.kahoot.it/ ) manage to do it. However, I am completely unable to understand how they do it, or replicate it.
To try it, just create an account, start a quiz (they call it Kahoot) and insert a YouTube video. When previewing it, the title doesn't ever show!
How can I replicate this?

Controls for YoutubeVideoPlayer in JS

I am using the YoutubeVideoPlayer to play videos in ionic. I was able to get the video to play but I want to make it so the user can not search through the video among other things. Is there a way to get any of these function to work?

Am I allowed to hide a YouTube video after a user action?

This question is slightly different from:
https://stackoverflow.com/questions/15034835/can-i-hide-a-embeded-youtube-video-or-is-that-against-the-terms-of-use
When a user visits our website, the YouTube player is visible and in the right size. A user can play the video and see the whole video. Nothing fancy. However we want to put the player in a tabbed interface. Meaning that the user can hide the video by going to another tab. For example:
Video | Info | Share
When the site loads the Video tab is active, but users can click "Info", then the video is hidden while the video keeps playing in the background.
Is this allowed? I would say gray area but I'm not sure. We always show the YouTube logo and link to the YouTube video on youtube.com btw. Also, if a users scrolls down on youtube.com, the user also hides the video and can still hear the audio. Is this perhaps the same area?
This is in their terms of services so i would say it is not allowed
8.separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available through the YouTube API;
9.promote separately the audio or video components of any YouTube audiovisual content made available through the YouTube API;
14.use a video player smaller than the minimum video player size set forth in the YouTube API documentation and specifications.
https://developers.google.com/youtube/terms?hl=it

Displaying video previews from various providers

My use case is kinda basic. According to the URL a user inputs, I want to have the good player displayed, that varies according to the input of course.
For instance, inputting http://www.youtube.com/watch?v=rv5OwTiBEiQ would display the preview of the Youtube player. The same goes with Dailymotion, Yahoo!, Vimeo, Justin.tv, Myspace...
Do you know is any Javascript plugin does this ? Ideally, it'd be based on Prototype.
In the Youtube case, all you have to do is get the video id of the url and put this in the follow URL:
http://img.youtube.com/vi/{video-id}/1.jpg
Then you have the link to the youtube preview image!

Skip video in YouTube playlist using JavaScript

I've looked through the YouTube JS API, but can't find a way to jump to a video in a playlist. (Mimicking the built-in navigation)
And if you're wondering why I'd want both, it's because I have a menu set up with additional information, and want to let the user click these links to jump between the videos.
You can write your own YouTube player script or use this one -- YouTube JavaScript API Player plus Playlist.

Categories

Resources