Develop Reference

Playing youtube video randomly on element's background

Currently, I'm using this jquery which gets youtube video and plays them in element's background.
I was provided with this code that will play single youtube video. But I would like to make a list of videos and play them randomly... I am not so good with Javascript at the moment, so I would really appreciated some help on this...
right now I have this....
I wanna make a list of videos and play them randomly like a shuffled playlist..
$(function()
{
var videos = ['xJvt2SDV7ck', 'x6DD1k4BAUg', 'xJvt2SDV7ck'];
var index = Math.floor(Math.random() * videos.length);
var Video_back = new video_background($("#bgvideo"),
{
"position": "absolute", //Stick within the div
"z-index": "-1", //Behind everything
"loop": true, //Loop when it reaches the end
"autoplay": true, //Autoplay at start
"muted": true, //Muted at start
"youtube": "videos[index]", //Youtube video id
"start": 0, //Start with 6 seconds offset (to pass the introduction in this case for example)
"video_ratio": 1.333, // width/height -> If none provided sizing of the video is set to adjust
"fallback_image": "videos/main.jpg", //Fallback image path
});
});
Currently It only plays 1 video randomly selected from the list(single loop).
I want to make it so that it will move on to another video when the first video finishes..
HELP WILL BE MUCH MUCH APPRECIATED! THANK YOU FOR YOUR TIME!

The following answer is based on the fact that there is no way of determining when a video has finished. The lengths are in milliseconds:
$(function()
{
var videos =
[
{ id : 'xJvt2SDV7ck', length : 60000 },
{ id : 'x6DD1k4BAUg', length : 125000 },
{ id : 'xJvt2SDV7ck', length : 166000 }
];
function playNext()
{
var index = Math.floor(Math.random() * videos.length);
alert( "Playing next movie => " + videos[index].id );
var Video_back = new video_background($("#bgvideo"),
{
"position": "absolute", //Stick within the div
"z-index": "-1", //Behind everything
"loop": true, //Loop when it reaches the end
"autoplay": true, //Autoplay at start
"muted": true, //Muted at start
"youtube": videos[index].id, //Youtube video id
"start": 0, //Start with 6 seconds offset (to pass the introduction in this case for example)
"video_ratio": 1.333, // width/height -> If none provided sizing of the video is set to adjust
"fallback_image": "videos/main.jpg", //Fallback image path
});
setTimeout(function()
{
playNext();
}, videos[index].length);
}
playNext();
});

OKVideo two videos in one page differect sections

Ok so I've done alot of digging and can't find any info on this. I'm trying to get the jquery plugin OkVideo to make 2 "section" tags have a different video in each however even if i rename the container to be specifically ID'd the video loads in one container.
e.g.
<section>
<div id="container1"></div>
</section>
<section>
<div id="container2"></div>
</section>
$('#container1').okvideo({
source: 'Video1 Url',
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false
});
$('#container2').okvideo({
source: 'Video2 URL',
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false
});
Now the above is causing the 2nd video to overwrite the first video in it's container. Which is not the desired effect. Can someone suggest a similar plugin that allows this or an overwrite to get this to work without recoding half of the plugin javascript?

Right so after a few hours of fighting I finally fixed this by rejigging the okfocus okvideo to take an extra option "newtarget" which identified if there where multiple videos on the page.
if (base.options.newtarget == undefined) {
base.options.newtarget = "";
}
var target = $("#" + base.options.newtarget) || base.options.target || $('body');
var position = target[0] == $('body')[0] ? 'fixed' : 'absolute';
All items being added to the page had the newtarget appended to the id e.g.
target.append('<div id="okplayer' + base.options.newtarget + '" style="pos.....
Then we add the options to the window data setting each option setting to take the newtarget as part of its naming convention(please ensure to format it in lowercase and strip extra '-' etc.)
$(window).data('okoptions' + options.newtarget.replace('-', '').toLowerCase(), base.options);
Then locate the function onYouTubePlayerAPIReady() or if vimeo's vimeoPlayerReady() and extended it with a class selector for the videos on the page
$(".videoClass").each(function(e) {
options = jQuery(window).data('okoptions' + $(this).attr('id').replace('-', ''));....
once these have been added you add an unobtrusive function to add all the options
var collection = $(".videoClass");
collection.each(function () {
$("#" + $(this).attr('id')).okvideo({
source: $(this).attr("data-link"),
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false,
newtarget: $(this).attr('id')
});
});
This could probably be neatened up but as I was in a rush the is this working solution.

I spent a few hours working on this. This selected solution wasnt very helpful so I have a working, but certainly less than ideal solution. My goal was to have two fullscreen background videos when navigating with jquery.fullPage.js.
OKVideo injects html to enable the video, I grabbed this html for my first video and changed the youtube url, used jquery append to insert the new html video code into proper code section.
One problem I had was that the video didnt repeat properly - but I used jquery to fadeOut the video id once it was concluded. Im sure if you wanted it to repeat you could simply put the code into a js loop.
Here is the code I needed to 'append':
replace the sample video id "HkMNOlYcpHg" with your youtube video id, and replace example.com with your web domain.
jQuery('#section3').append('<div id="okplayer-mask1" style="position:
absolute; left: 0px; top: 0px; overflow: hidden; z-index: -998; height: 100%;
width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAPABAP
///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D);"></div><iframe id="okplayer1"
style="position:absolute;left:-10%;top:-10%;overflow:hidden;z-index:-999;
height:120%;width:120%;" frameborder="0" allowfullscreen="1" title="YouTube video
player" width="640" height="360" src="https://www.youtube.com/embed
/HkMNOlYcpHg?autohide=1&autoplay=1&cc_load_policy=0&controls=3&
amp;enablejsapi=1&fs=0&modestbranding=1&origin=http%3A%2F
%2Fexample.com&iv_load_policy=3&loop=1&showinfo=0&rel=0&
amp;wmode=opaque&hd=1"></iframe>');

Configure VideoJS Flash fallback

Since Firefox doesn't allow me to use an .mp4 file in the <video>-tag, I have to use the Flash-fallback on my VideoJS player.
For Chrome, Safari and IE, I can configure my VideoJS player with javascript to do pretty much anything. For example I like to loop it 5 times, hide the controls and mute the video. No issue there for the HTML5 version:
// Initialize the video with some settings
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
// Set the counter
var loop_count = 1;
// Function to loop the video exaclty 5 times
var loopInstagramVideo = function() {
if (loop_count <= 5) {
myVideo.play();
loop_count++;
} else {
loop_count = 1;
}
};
// Function to manipulatie the playing video (mute, no controls,...)
var setVideoOptions = function() {
myVideo.muted(1);
myVideo.controls(0);
};
// Set functions on the video
myVideo.on("play", setVideoOptions);
myVideo.on("ended", loopInstagramVideo);
So I would like to do the same for the Flash version.
The code above is generating an error on the videojs-call with the error:
TypeError: The element or ID supplied is not valid. (videojs)
Any thoughts on how to tackle this issue?

While this isn't an answer for your "looping" question, I just myself discovered that after calling videojs() on an element, the ID changes. Whether it's the ID of the element changes or the focus of the videojs call changes I don't know. The error pertaining to the ID not being valid is being caused by your first and second videojs() calls.
I would change this:
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
To this:
var myVideo = videojs(videoID);
myVideo.controls = false;
myVideo.autoplay = false;
myVideo.preload = "auto";
OR put those properties in the video tag itself.

Tubeplayer causing elements to (briefly) reappear in chrome?

I'm working on some javascript to insert a youtube video into a page using the tubeplayer plugin. The video is inserted when the user clicks a link and is removed when the user clicks the close button.
For the most part, the script works fine. When the user clicks the close button, the button slides away, the video player fades out, the container fades out, and everything looks the way it did before the user clicked the link.
In Chrome, however, after everything has faded out, the video and the close button will occasionally re-appear in a brief flash. It's not consistent - it only occurs about half the time - but it looks bad.
I've tried all sorts of things to fix this - hiding elements, not hiding elements, removing elements at various point in the script - and it keeps happening. The only thing I'm certain of is that tubeplayer is a necessary element; if I take tubeplayer out and just show / hide the other elements, the flash does not occur.
I'm at a total loss about how to prevent this from happening. Any help would be hugely appreciated.
Here's my markup:
<section id="hero">
<div class="item-content">
<a href="http://www.youtube.com/watch?v=sC_IESaVT0A" class="youtube">
<img src="/dynamic-content/solutions/hero_content_mobility.png">
</a>
</div>
</section>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jnet.ytplayer.init('#hero', 711, 400, '#000');
});
</script>
And the script:
ytplayer = {
$target:null,
height:null,
width:null,
background:null,
defaults:{
allowFullScreen: "true",
initialVideo: 'FtUtE_kv7DU',
preferredQuality: "default",
showControls: 1,
showRelated: 0,
autoPlay: 1,
autoHide: 3,
border: 0,
theme: 'dark',
wmode: 'opaque',
origin: document.domain,
swfobjectURL: "/assets/js/jquery/plugins_jq.js",
allowScriptAccess: "always",
playerID: "tubeplayer-player-container",
loadSWFObject: false,
iframed: true,
onPlayerEnded: function(){
ytplayer.removeVideo();
}
},
init:function(target, w, h, bg){
this.$target = $(target);
this.defaults.height = h;
this.defaults.width = w;
this.background = bg;
},
showVideo:function(link){
var id = $(link).attr("href").replace("http://www.youtube.com/watch?v=", "");
this.defaults.initialVideo = id;
var markup = "<div id='youtube-container'>";
markup += "<div id='youtube-player'>";
markup += "<div id='youtube-closeBtn'></div>";
markup += "<div id='youtube'></div>";
markup += "</div>";
markup += "</div>";
this.$target.prepend(markup);
$('#youtube-closeBtn').click(function(){
ytplayer.removeVideo();
});
$('#youtube-container').height(this.defaults.height);
$('#youtube-container').css('background', this.background);
$('#youtube').height(this.defaults.height);
$('#youtube').width(this.defaults.width);
$('#youtube-player').height(this.defaults.height);
$('#youtube-player').width(this.defaults.width);
$('#youtube-container').fadeIn(200);
$('#youtube-player').fadeIn(600, function() {
$('#youtube').tubeplayer(ytplayer.defaults);
$('#youtube-closeBtn').show();
$('#youtube-closeBtn').animate({ 'right' : '-=49' }, 600, function(){
});
});
},
removeVideo:function(){
$('#youtube-closeBtn').animate({'right' : '+=49'}, 200, function() {
$('#youtube-closeBtn').hide();
$('#youtube').tubeplayer('stop');
$('#youtube-player').fadeOut(600, function(){
$('#youtube-container').fadeOut(100, function(){
$('#youtube-container').remove();
});
});
})
}
}

How to change video (and start playing immediately) in Flowplayer via Javascript?

It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.

See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>

See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);

$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.

You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'