Add Photobucket Videos

[Chris]

Stumbled across a thread I had totally forgotten about...
Original Thread: Supported Video Sites

Basically the direct link Photobucket gives you is the wrong link, you have to extract the correct link (the one with "album" in the URL) from the embed code instead and URI decode it.

Aug 1, 2013 14:53:18 GMT -8 VS Admin said:

We tried adding Photobucket support for videos as this was a requested feature, but we discovered that we are unable to implement this with only the URL to a Photobucket video at this time.

The code basically adds a Photobucket entry to the list of supported videos then asks for the embed code (not the direct link -- see images below) and converts that to a link that can then become a video on a forum.

Drop this in your global header

code:(revision 2)

<script type="text/javascript">

(function(){
	var wc = $.ui.wysiwyg.prototype._create,w,$f
	$.ui.wysiwyg.prototype._create = function(){
		w = this;
		wc.apply(this);
		$('#video-list-info').livequery(function(){
			if($('li.video-photobucket',this).length) return;
			var $f = $(this).parent().find('input[name="url"]')
			$('a[href*="ustream.tv"]',this).parent().before('<li class="video-photobucket"></li>')
			.prev().append('<a href="http://photobucket.com/" target="_blank">Photobucket.com</a>')
			.children('a').on('click', function(e){
				e.preventDefault();
				var dialog = w.dialog;
				w.dialog = $('<div></div>')
				.insertBefore(dialog)
				.hide()			
				.dialog({
					autoOpen: false,
					height: 'auto',
					width: 'auto',
					dialogClass: 'photobucket-dialog',
					close: function() {
						$.clearInputError();
						w.dialog.remove();
						w.dialog = dialog;
						$('input',dialog).first().focus().select()
					}
				})
				w._prompt({		
					title: 'Photobucket Embed Code',
					extraInfo: '<div style="max-width:400px;font-size:0.7em;">paste your photobucket embed code and we\'ll attempt to convert it to an URL for you. If you already have an url that has the "/album/" part in it and ends in ".mp4" you can close this dialog and enter it directly</div>',
					fields: [{
						input: true,
						type: "text",
						title: "Embed Code",
						name: 'embed',
						required: true
					}],
					ieWidth: 400, //guessed :P
					callback: function(values){
						var url;
						if((url =values.embed.match(/(https?)([a-z0-9_%:\.\/]+?)(\.mp4)([^a-z0-9_%\.\/]|$)/i)) && url[3] && /\/albums\//.test((url[2]=decodeURIComponent(url[2])))){
							$f.val(url[1] + url[2] + ".mp4");
						}else{ proboards.alert('No MP4 Photobucket video URL found!');}
					}			
				})
				setTimeout(function(){
				$('.photobucket-dialog input[name="embed"]').focus().select();
				},0)
				
				
			})
		})
	}
})()

</script>

click on the photobucket.com link that has been added by this code to the list of supported videos in the add video dialog in order to get a second dialog that then allows you to paste the embed (aka html) code [see image above]

[Former Member]

Thank for this Chris
I just tested this on my forum Link To Video  and works perfectly
I have many videos on Youtube I  went to download manager on my Youtube account
then downloaded my video as mp4 and then uploaded it to photobucket and the video plays..

Steve

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Feb 29, 2016 8:24:36 GMT -8 Chris said:

Stumbled across a thread I had totally forgotten about...
Original Thread: Supported Video Sites

Basically the direct link Photobucket gives you is the wrong link, you have to extract the correct link (the one with "album" in the URL) from the embed code instead and URI decode it.

Aug 1, 2013 14:53:18 GMT -8 VS Admin said:

We tried adding Photobucket support for videos as this was a requested feature, but we discovered that we are unable to implement this with only the URL to a Photobucket video at this time.

The code basically adds a Photobucket entry to the list of supported videos then asks for the embed code (not the direct link -- see images below) and converts that to a link that can then become a video on a forum.

Drop this in your global header

code:(revision 2)

<script type="text/javascript">

(function(){
	var wc = $.ui.wysiwyg.prototype._create,w,$f
	$.ui.wysiwyg.prototype._create = function(){
		w = this;
		wc.apply(this);
		$('#video-list-info').livequery(function(){
			if($('li.video-photobucket',this).length) return;
			var $f = $(this).parent().find('input[name="url"]')
			$('a[href*="ustream.tv"]',this).parent().before('<li class="video-photobucket"></li>')
			.prev().append('<a href="http://photobucket.com/" target="_blank">Photobucket.com</a>')
			.children('a').on('click', function(e){
				e.preventDefault();
				var dialog = w.dialog;
				w.dialog = $('<div></div>')
				.insertBefore(dialog)
				.hide()			
				.dialog({
					autoOpen: false,
					height: 'auto',
					width: 'auto',
					dialogClass: 'photobucket-dialog',
					close: function() {
						$.clearInputError();
						w.dialog.remove();
						w.dialog = dialog;
						$('input',dialog).first().focus().select()
					}
				})
				w._prompt({		
					title: 'Photobucket Embed Code',
					extraInfo: '<div style="max-width:400px;font-size:0.7em;">paste your photobucket embed code and we\'ll attempt to convert it to an URL for you. If you already have an url that has the "/album/" part in it and ends in ".mp4" you can close this dialog and enter it directly</div>',
					fields: [{
						input: true,
						type: "text",
						title: "Embed Code",
						name: 'embed',
						required: true
					}],
					ieWidth: 400, //guessed :P
					callback: function(values){
						var url;
						if((url =values.embed.match(/(https?)([a-z0-9_%:\.\/]+?)(\.mp4)([^a-z0-9_%\.\/]|$)/i)) && url[3] && /\/albums\//.test((url[2]=decodeURIComponent(url[2])))){
							$f.val(url[1] + url[2] + ".mp4");
						}else{ proboards.alert('No MP4 Photobucket video URL found!');}
					}			
				})
				setTimeout(function(){
				$('.photobucket-dialog input[name="embed"]').focus().select();
				},0)
				
				
			})
		})
	}
})()

</script>

click on the photobucket.com link that has been added by this code to the list of supported videos in the add video dialog in order to get a second dialog that then allows you to paste the embed (aka html) code [see image above]

That typo in the description embed box says "halready have an url"
The halready is funny but "an url" is also gramatically incorrect because it makes the you sound.
But im just picky. That can be changed on a local copy.

[Chris]

It would be grammatically incorrect if you enunciated each letter which I assume you do but if you pronounce it as "earl" like me then the use of the indefinite article "an" is indeed correct. Good coders generally try not to paint themselves into a corner by giving consideration to the fact that their way may not be the only way. As for the typo, ask a good coder to perhaps examine the code for you so they canand verify that the typo in the first draft is not present in the version posted in this thread.


Edit: this code is not technically acceptable to coding guidelines since it makes use of livequery but it is grandfathered in since it was written prior to that announcement. Your mission, should you choose to accept it Mista Pasta, is to rewrite the code so it does not make use of livequery.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Earl lol.

[Chris]

It's pronounced LOLL

[daylilydude]

Chris...
I have added this to my global header as instructed, but it doesn't seem to be working for me... am I missing something? Here is a link to where I have it used...
notjusttomatoes.proboards.com/thread/3113/happy-17th-anniversary?page=1&scrollTo=35851

We are hoping to get this right as a lot of my members use PhotoBucket
TIA

[Former Member]

Mar 10, 2016 3:14:08 GMT -8 daylilydude said:

Chris ...
I have added this to my global header as instructed, but it doesn't seem to be working for me... am I missing something? Here is a link to where I have it used...
notjusttomatoes.proboards.com/thread/3113/happy-17th-anniversary?page=1&scrollTo=35851

We are hoping to get this right as a lot of my members use PhotoBucket
TIA

The video seems to be displaying OK to me using Chrome also tested using Firefox and win 10 Microsoft edge
Also was Ok viewing using internet explorer 11 and i was able to view the video
If its the video of the car running over the track

EDIT: Checked using browsers - Chrome - Firefox - Microsoft Edge - Internet Explorer 11

Steve

[daylilydude]

Thank you @xsteveuk,
I'm using Firefox here also, but all I see is this??? I case you can't read this it says... " No video with supported format and MIME type found" TIA

[Former Member]

That's strange As when I view the link you provided with the video
I see this  on your forum using Firefox 45 and the video displays
Perhaps Chris may be able to help when online
Have you tried updating your browser

[Chris]

Sorry for the late reply but I've been given a few obstacles to overcome of late. Right now, I'm on a borrowed computer due to a fire...

At first glance, this sounds like a case where the device either lacks the necessary audio and or video codec or the graphic hardware necessary to render the video

[daylilydude]

I am just gonna let y'all know that it was fault on my end with a very old computer and the wife has bought me a new one, so all is well now... thank you very much for trying to help me figure it out.