We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ C ] Embed JW Player
Topic Started: Dec 3 2014, 01:47 PM (509 Views)
Sethwt
Member Avatar

[ *  *  * ]
Board Address: http://animecafeforum.com
Board Software: ZetaBoards
Description: Just like how we're able to embed YouTube videos with the [flash] bbcode, I want to do the same except with JW Player on forum posts using a [jwplayer] bbcode. My forum uses JW Player but only works using HTML. I was told this is possible but I haven't been able to implement it. :P

Here's what I use for JW Player:
Code: HTML
 
<script>
jwplayer("LICENSE_KEY").setup({
image: "LINK_TO_THUMBNAIL.jpg",
width: "560",
height: "315",
abouttext: "Brought to you by Anime Cafe",
aboutlink: "http://animecafeforum.com/index/",
sources: [{
file: "LINK_TO_360p_VIDEO"
},{
file: "LINK_TO_720p_VIDEO",
default: "true"
}]
});
</script>
Edited by Sethwt, Dec 3 2014, 05:29 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
So let me get this straight, JW Player is basically a service that allows you to embed other video services, only the player itself is more enhanced which is why you're wanting to use it?
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
Cory
Dec 5 2014, 04:22 PM
So let me get this straight, JW Player is basically a service that allows you to embed other video services, only the player itself is more enhanced which is why you're wanting to use it?
Indeed. It allows me to enable SD/HD quality playback and various other options as well.
Edited by Sethwt, Dec 6 2014, 05:45 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
What sites/files did you want the JW Player BBCode to support?
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
The files change usually weekly so I'd need the ability to change the .mp4 url(s) and the thumbnail image.

The site is ayeris.hostoi.com
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Are you willing to follow Step 1 of this documentation?

http://support.jwplayer.com/customer/portal/articles/1406723-mp4-video-embed
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
Yes.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
After following Step 1, try this code for the actual BBCode functionality:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#c_bbcode button:last').after(' <button type="button" onclick="ZetaTag(\'JWPLAYER\')">JW Player</button>');

$('td:contains([jwplayer]):not(:has(textarea)), div.search_results:contains([jwplayer])').each(function() {
$(this).html($(this).html().replace(/\[jwplayer\](.+?)\[\/jwplayer\]/ig, '<div class="jwplayer">Loading the player...<div style="display: none">$1</div></div>'));
});

$('div.jwplayer').each(function() {
$(this).attr('id', 'jwplayer' + $(this).index());
$(this).after('<scr' + 'ipt type="text/javascript">jwplayer("' + $(this).attr('id') + '").setup({ file: "' + $(this).find('div').text() + '", image: "", width: 640, height: 360 }); <\/scr' + 'ipt>');
});
//]]>
</script>
I'm not sure if it will work as it's untested. If it doesn't work, please set it up on a test board so I can see where I went wrong.
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
The video plays and works perfectly. Is there a way to add a thumbnail?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you want the BBCode to have this option, or it only be an option for administrators?
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
I actually want this BBCode to be for administrators only. :)
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
So, the BBCode button should only appear for administrators and there should be an additional input in the BBCode for a thumbnail?
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
Yes.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this instead:
Code:
 
<script type="text/javascript">
//<![CDATA[
if ($.zb.admin === 1) {
$('#c_bbcode button:last').after(' <button type="button" onclick="JWPlayer()">JW Player</button>');
}

function JWPlayer() {
var file = window.prompt('Enter the complete URL for the flash file', 'http://');
var thumbnail = window.prompt('Enter the complete URL for the thumbnail', 'http://');
ZetaInsert('[jwplayer=' + file + ']' + thumbnail + '[/jwplayer]');
}

$('td:contains([/jwplayer]):not(:has(textarea)), div.search_results:contains([/jwplayer])').each(function() {
$(this).html($(this).html().replace(/\[jwplayer=(.+?)\](.+?)\[\/jwplayer\]/ig, '<div class="jwplayer">Loading the player...<div style="display: none">$1</div><span style="display: none">$2</span></div>'));
});

$('div.jwplayer').each(function() {
$(this).attr('id', 'jwplayer' + $(this).index());
$(this).after('<scr' + 'ipt type="text/javascript">jwplayer("' + $(this).attr('id') + '").setup({ file: "' + $(this).find('div').text() + '", image: "' + $(this).find('span').text() + '", width: 640, height: 360 }); <\/scr' + 'ipt>');
});
//]]>
</script>
Offline Profile Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
Yep. Everything works how it should. :)

Thanks a lot for this, Cory.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1