OKVideo: Controlling Video Playback with Links - javascript

Plugin Reference: http://okfoc.us/okvideo/ | https://github.com/okfocus/okvideo
Hey Guys,
I've been trying to get my links to control which video plays with the OKVideo plugin but for some reason it doesn't work. I've tried a myriad of different method with no success.
To activate the plugin, you use:
$(function(){
$.okvideo({
source: 'BHE8Yre3Ex8',
})
});
I've added some links that store the YouTube video ID as an attribute. When the user clicks the link, the video should stop playing the current video and begin playing the next selected one.
Also, I'm not trying to have the video play automatically (on page load)–only on a video selection. I've looked into the code but the options don't seem to work.
I've stripped my code and placed the core of it into jsfiddle, here: http://jsfiddle.net/mikemiketm09/rd4fL/
FYI: It did say you can use YouTube API with the plugin.
Your help would be greatly appreciated.

Related

How to remove pause menu video suggestions / related videos (class: ytp-pause-overlay) from Youtube embed

Youtube is showing a menu with video suggestions while my embedded video is paused. The element in the iframe has the class 'ytp-pause-overlay'
How can you remove it without removing controls?
In case you loading your videos using Javascript YouTube Player iframe API you will need to use Player Parameters and set the value of rel to 0.
Example:
player = new YT.Player( 'player', {
height: '390',
width: '100%',
videoId: 'y9QEQHe8ax4',
playerVars: { 'rel':0}
}
);
Update in October 2018
Youtube changed the behavior of rel parameter:
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
To be more specific: Prior to the change, if the parameter's value is
set to 0, then the player does not show related videos. After the
change, if the rel parameter is set to 0, the player will show related
videos that are from the same channel as the video that was just
played.
Update in October 2019
I found a workaround in case you are the owner of the videos.
Use the provided code example to require Youtube to load the related videos from your channel only.
In order enforcing Youtube to remove the related videos list.
Simply I created a new channel and uploaded the needed videos as unlisted. You have to make sure that All the videos in the new channel are not listed which means that when Youtube tries to show the related videos from the same channel the list will be empty so Youtube doesn't show related videos menu at all.
To test this solution try an incognito session or another browser because Youtube will show the related videos menu to you if you are logged in with the same account that owns the channel and has access over the unlisted videos
Yes it is possible. You have to use showinfo=0?ecver=2 in your iframe code.
Example:
<iframe src="https://www.youtube.com/embed/pV1jC37ELmQ?rel=0&showinfo=0?ecver=2" width="640" height="360"></iframe>
The solution for me was to add the parameter "rel" with a value of "0" to the end of the url.
According to the developers guide here, the description of the "rel" parameter is:
This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. The default value is 1.
When I set the value to "0", this parameter keeps the suggested videos from being displayed when the video is paused.
An example url would be:https://www.youtube.com/embed/ABCDEFG?rel=0
None of the proposed solutions worked for me, so I ended up adding this to the page:
<style>
.ytp-pause-overlay{
display:none;
}
</style>
After trying all of these tricks (and a few from other posts as well), I still could not get rid of the ytp-pause-overlay. The only thing that DID actually work was restricting the dimensions of the iframe itself (using percentage), while setting the desired dimensions (using px) in an outer div.
Example: <div style="height: 300px; width: 350px"><iframe style="width:90%" src...></iframe></div>
(Please excuse the inline styling)
I messed around with this for a little bit and found this solution worked for me:
my browser is chrome version 73.0.3683.86
my adblock plus is version 3.5
using adblock plus, go to its settings, click on advanced on left side, scroll down to the "My Filter List" area, add the following line:
.ytp-pause-overlay
click save, reload the webpage with the video.
I have also added the following but I do not think it is necessary to solve your exact problem but I am including the info just to be thorough. I believe this just blocks the grid of suggested/related content at the very end of the video.
/yts/swfbin/player-*/endscreen.swf
youtube.com##div.videowall-endscreen
youtube.com##watch-related

After video plays show another video in its place (Vimeo)

I am looking to have a video play once the first video ends. Both videos are coming from Vimeo. I have attempted to use this plugin and follow the Vimeo API however I can't seem to get anywhere. The plugin successfully plays one video after the other but the video loads next to it, not in place of it. I've also tried the suggestion on this post but it doesn't work for me either.
Any suggestions? I'm beginner level for Javascript so the more detail the better :) thank you!

JWPlayer : issue in stop and play using javascript

I am using jwplayer to play videos on my site. I want to implement this scenario :
A small thumb nail image represent the video.
when a user click on the thumb image the jwplayer div shows and starts to play and the thumb image will hide .
An external close button will allow to close the video. Then the thumb image will show again.
I am trying to accomplish it by using js.
The following is used to play the video:
jwplayer('container').play();
and this is used to stop the jwplayer:
jwplayer('container').stop();
The functions are working in chrome . But in firefox when I try to play the video in second time the jwplayer is in BUFFERING state. Also revert back to the placeholder image.
also shows an error sometime in console
Error: Permission denied to access property 'toString'
This is a sample jsfiddle demo
http://jsfiddle.net/35bGW/
Please help me to find a solution for this.
Thanks
YouTube now defaults to HTML5 mode as primary in 6.9.
There are some issues with setting up the player again with YouTube in HTML5 mode.
I have reported this as an issue to the player team here.
A work around, for now, is in your code, under this line:
stretching: 'exactfit',
Add:
primary: 'flash',
This should work around the issue for the time being.

Soundmanager 2: All buttons working except for 'Play' when streaming from Soundcloud

I have a site that's using Soundmanager 2 to steam music using Soundcloud.
Everything seems to be working fine, with the exception of the play button (in the footer). If the user presses 'Previous' or 'Next', sound will play with no issues and the 'Pause' / 'Play' buttons will function perfectly. It's essentially the play button not playing sound when freshly loaded.
You can view the site here: http://socialscar.plastiqueband.com
A link to the jQuery can be found here in /static/js/application.js
The player functions can be found on lines 1032 - 1044 of the homepage source code.
This code is based entirely from this working example: soundcloud-sm2.heroku.com, only changing the Client ID and Soundcloud URL where appropriate, so I'm totally out of ideas for why this isn't working.
If anyone has any ideas, I'd be so grateful.
Okay, seems this is now fixed. Line 156 of application.js should have been
$('.tracks li:first').click();
instead of
$('li:first').click();
Knew is would be something very simple :)

youtube thumbnail using paused videos

I'm trying to make a web-app in which people can remix youtube videos...
I looked at the youtube api, and it doesn't seem to support thumbnail at a specific location.
So, I'm trying to create multiple chromeless youtube videos, start them at specific positions and stop them almost immediately to make them seem like "thumbnails".
However, the videos all show up black when I try to do so.
Here's the link to the source code: http://pastebin.com/6Bpr1Dsz
Note that when I comment out the pauseVideo part, the videos play fine.
ps: I tried to make this work on jsfiddle, but it wouldn't work.
Thanks :)

Categories

Resources