Pause a youtube video in a slideshow - javascript

I have a slideshow/slider containing images and videos from youtube.
Is it possible to pause the current youtube video if the next or prev button is pressed.
Also would i be able to auto play the clip when one comes back to the same slide?

Yes. YouTube JavaScript Player API Reference is what you need https://developers.google.com/youtube/js_api_reference#GettingStarted
Use player.stopVideo() method.

Related

Stop Audio in Wordpress

I am using the background video option in Divi (by elegant themes) in Wordpress to show a 4 minute or so long video in the background. The thing is, I don't want the audio. I understand if you scroll down far enough the entire thing stops, but I just don't need or want the audio. Is there any custom code that I can use (or a plugin) to get the audio to stop playing ON THE VIDEO BACKGROUND, or will I have to convert it to a gif? Thanks.

HTML5 video playing backward, detect "end" of video

I am trying to make video player where, when you click on backward button, it will go backwards, and when it hits 00:00 time, it change video source and starts to play another video.
Asume that list of videos can be js array. When you are on video2, you hit backward. Video2 is going backward and when it hit 00:00, it swap source to video1. And video1 will be playing backward.
var vids = [
"video1",
"video2",
"video3",
"video4"
];
According to my research, HTML5 video supports onended() function when you can detect normal end of video, but it does not solve it for end in backward direction.
According to this thread play-a-video-in-reverse-using-html5-video-element.
Browsers currently do not support playing video backward. There is only one way how to manage it by faking current time in video. See how it looks like in this jsfiddle http://jsfiddle.net/UkMV2/5/
Use of onended() function when video plays forward, and put another video when that before ends is easy. But how to detect that video ended in start?
I will appreciate any suggestions which can move me forward.

Seekng in audio tag and Scrolling the text

I am trying to move my paragraph vertically along with the audio.
So far I tried it with but each time I tried seeking the audio or jumping for few seconds, my marquee is not in sync with my audio.
Is there any way I can try my paragraph scrolling using this
?
The scrolling should stop when the audio is pause,
should resume when the audio is playing again.
HTML5 is all set up for this.
See here for a basic guide. This shows how to use a caption <track> with the <video> element, but it works for <audio> as well.
Here is a reference page.

"Hide" a YouTube Video's Loading screen

After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.
My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.
My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.
Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.
set the background of the iframe container to black and set the iframe opacity to 0, once it starts playing set the opacity back to 1
Host the video and use an API where you can; customize the media player, hide / show / customize load screens, cue points, start poster / end poster, etc. Or else your spending your time hacking youtube API capabilities with funky javascript.
JW player: http://www.jwplayer.com/
Flow Player: https://flowplayer.org/docs/cuepoints.html
And many others you could check out.
video.js, popcorn.js, etc etc.
<div id="player" style="background: #FFFFFF; opacity: 0;"></div>
// 2. This code loads the IFrame Player API code asynchronously.
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 4. The API will call this function when the video player is ready.
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video(state=1),
// the player should play for six seconds and then stop.
if (event.data === 1) {
console.log('video plays');
document.getElementById("player").style.opacity = "1";
}

How to disable / enable the play button on a YouTube video with jQuery?

Background:
I am building a timed jQuery slideshow that contains a YouTube video as one of the elements. I am using the YouTube JavaScript Player API to detect the play status of a video (slide 1) and pause the slideshow if a video is playing. This portion is working.
However, there is a problem if the user clicks the play button during the 700ms slide transition. My jQuery will not detect the playing video on that cycle (slide 1), but it will detect the playing video on the next cycle (showing slide 2). It will pause the slideshow on slide 2, and there is no way to resume the slideshow again - since that would require pausing the YouTube video on slide 1 (now hidden).
Question:
How can I disable the play button on the YouTube video during the transition and re-enable it after it is complete? One option is to put a transparent gif image over the entire video, but perhaps there is a more elegant / less kluge-y solution using the YouTube API? I haven't been able to find it.
I don't think you can do what you want to do with the default interface. However, have you taken a look at the YouTube Chromeless Player? It's part of the YouTube API, but strips away part or all of the "chrome" on YouTube. My only concern is that this might remove too much of that chrome. Give it a look and see if it will work for you.

Categories