"Video Box" , page 4 : Multimedia : Help-Site - World of Warcraft Durotan server - Guild Hosting - GuildPortal

• Login: Password: Save New User? Forgot?

Home

Forums

Code

Forums

: > Video Box

Prev 1 2 3 4

pcolapat (Member)

9/21/2011 11:53 AM EST : RE: Video Box v3

pcolapat Posts: 1124 0 Like 0 Dislike	Mottie said: Oh, and if you can't wait... the easiest solution would be to go to this post, then hit the reply & quote button... the code shows up properly in this case, so just copy it from there. I really love the "Get Mods" feature. It is so easy and helpful. Thank you so much for adding stuff to that. Characters: pcolapat
•

pcolapat (Member)

9/21/2011 11:56 AM EST : RE: Video Box v3

pcolapat Posts: 1124 0 Like 0 Dislike	That did work by the way, the copying from the reply quote, thanks again. Characters: pcolapat
•

pcolapat (Member)

9/23/2011 1:45 PM EST : RE: Video Box v3

Posts: 1124

0
Like

0
Dislike

Yes I did get it to work, but there are two things I would like to change on it and I was wondering if you could help me with it.

!. the media box is going to be on my home page, and the default image for the box is a giant grey square. I would like to put an image there instead. Is there a way I can do that?

2. I would like for people to be able to comment on the videos within that box, is there a way I can do that?

Those two things are the only things I can think of.

Characters: pcolapat

•

eVaderum (Applicant)

1/14/2012 4:55 PM EST : RE: Video Box v3

Posts: 801

0
Like

0
Dislike

I just want to thank you for these video player scripts, I started out using version 2 for our guild kill videos and version 3 for raid guide videos, but over time I've modified them so much that they became something completely different. Both have modified the script so that only the actual VideoID from youtube is needed, which is mainly because it makes the code a bit neater, and I'm somewhat obsessive/compulsive about certain technical things like that.

The kill vids one ended up using a modification of the setVideoBox portion of the script from v3 to dynamically set the facebox content

Kill Vids Script

<script type="text/javascript">

function setVideoBox(videonm) {

if (videonm == "blank") {

var a = 'something goofed up, try again, tell eVa';

} else {

var x = 'http://www.youtube.com/v/' + videonm + '?version=3&hl=en_US&rel=0'

var a = '<object id="vb1" width="853" height="510"><param name="movie" value="';

a += x + '"></param><em' + 'bed id="vb2" src="' + x + '" type="application/';

a += 'x-shockwave-flash" width="853" height="510"></embed></object>';

}

document.getElementById('videoBox').innerHTML = a;

}

$(document).ready(function(){

setVideoBox('blank')

})

</script>

with the links formatted to trigger the script and open the facebox
<a rel="facebox" href="#videoBox" onClick="setVideoBox('_S17LWS_5Po')">Halfus Wyrmbreaker</a>

and the hidden div that populates the facebox
<div style="display: none;"><div id="videoBox"></div></div>

The raid guide vids has been more heavily modified. It's been split into categories, but doesn't use drop-down selection boxes. I've also split it into XML/XSL to make it as easy as possibly for other officers in my guild to update it. Since they only have to update the XML, which contains nothing but the data. The design is all in the XSL, which does the work, and isn't a concern when adding/changing/removing videos.

XML

<?xml version="1.0" encoding="utf-8"?>

<videos>

<default id="fl" video="sJTae9EjFxc" />

<instance id="bh" name="Baradin Hold">

<boss r="lV8-LZzgigY">Argaloth</boss>

</instance>

<instance id="bwd" name="Blackwing Descent">

<boss r="kVZMP1RCivs" h="BCtKiwVkbdo">Magmaw</boss>

<boss r="k8xa-NY7LfE" h="xgCGEBMC_uw">Omnitron</boss>

<boss r="uqvzlrq6J-Y" h="3v1vNrSJ460">Maloriak</boss>

<boss r="76_r3fgddV4" h="IohfsDvTkmU">Atramedes</boss>

<boss r="eLa57ES3py8" h="rvMCEkflaak">Chimaeron</boss>

<boss r="iTlEAnZBF_k" h="ZNU1Yiawk7k">Nefarion</boss>

</instance>

<instance id="t4w" name="Throne 4 Winds">

<boss r="reidCXz7Cmc" h="0jnUselPwAU">Conclave of Wind</boss>

<boss r="neDeFX4iyNk" h="_2PXI6nU3Vw">Al'Akir</boss>

</instance>

<instance id="bot" name="Bastion of Twilight">

<boss r="FPEs9O-Bpa0" h="tGkqOd8-0TM">Halfus Wyrmbreaker</boss>

<boss r="280cUwlzlOg" h="boq8KzafMKQ">Valiona & Theralion</boss>

<boss r="dQSkOh_6ksg" h="RDsRT1UdOZ4">Twilight Ascendant Council</boss>

<boss r="eWHNzND_wY8" h="oDSSMxiDFXc">Cho'Gall</boss>

<boss r="LPAF8d4BThI" h="">Sinestra</boss>

</instance>

<instance id="fl" name="Firelands">

<boss r="L8OQFgKTn_Q" h="">Beth'tilac</boss>

<boss r="GTD2ciqd3CM" h="">Alysrazor</boss>

<boss r="8IwVNAnXqs0" h="">Shannox</boss>

<boss r="aRKayYLQ8Lw" h="">Lord Rhyolith</boss>

<boss r="v43NBadlVZE" h="">Baleroc</boss>

<boss r="LVkRzArhTa8" h="">Majordomo Staghelm</boss>

<boss r="eR0G7DSV91o" h="">Ragnaros</boss>

</instance>

<instance id="ds" name="Dragon Soul">

<boss r="" h="">Morchok</boss>

<boss r="" h="">Warlord Zon'ozz</boss>

<boss r="" h="">Yor'sahj the Unsleeping</boss>

<boss r="" h="">Hagara the Stormbinder</boss>

<boss r="" h="">Ultraxion</boss>

<boss r="" h="">Warmaster Blackhorn</boss>

<boss r="" h="">Spine of Deathwing</boss>

<boss r="" h="">Madness of Deathwing</boss>

</instance>

<instance id="other" name="Other">

<boss r="sJTae9EjFxc">Perception and Awareness</boss>

<boss r="HcLIMBQeYxU">What is "Necessary"</boss>

<boss r="OE7M16hBeGg">Raid Leading: A Crash Course</boss>

<boss r="RrIizqk-Lz4">Taking out the Trash [mobs]</boss>

<boss r="76OBT24NuJ8">Gear vs Skill</boss>

<boss r="laxnxm1EEQQ">Effort & Endgame</boss>

<boss r="YUenHGB5CSo">Physical side of gaming</boss>

</instance>

</videos>

XSL

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" encoding="utf-8"/>

<xsl:template match="videos"><style>

#videoContainer, #videoContainer select { background:#000; color:#fff; }

#videoBox { background:#000; text-align:center; min-height:510px; }

</style>

<script language="Javascript"><![CDATA[

$(document).ready(function(){

setCat(']]><xsl:value-of select="default/@id" /><![CDATA[')

setVideoBox(']]><xsl:value-of select="default/@video" /><![CDATA[')

})

function setVideoBox(videonm) {

if (videonm == "blank") {

var a = 'VIDEO NOT AVAILABLE YET';

} else {

var x = 'http://www.youtube.com/v/' + videonm + '?version=3&hl=en_US&rel=0'

var a = '<object id="vb1" width="853" height="510"><param name="movie" value="';

a += x + '"></param><em' + 'bed id="vb2" src="' + x + '" type="application/';

a += 'x-shockwave-flash" width="853" height="510"></embed></object>';

}

document.getElementById('videoBox').innerHTML = a;

}

function setCat(cat) {

if (cat == "blank") {

var a = 'select a category';

} else {

var a = document.getElementById(cat).innerHTML;

}

document.getElementById('videoList').innerHTML = a;

}

]]>

</script>

<div id="videoContainer">

<table align="center">

<tr valign="top">

<td width="80"/>

<td width="120">

<table cellpadding="0" cellspacing="0">

<tr><td>Category</td></tr>

<xsl:for-each select="instance">

<tr><td><a href="javascript:void(0)" onClick="setCat('{@id}')"><xsl:value-of select="@name"/></a></td></tr>

</xsl:for-each>

<tr><td> </td></tr>

</table>

</td>

<td width="50"/>

<td width="200" id="videoList">

<table/>

</td>

</tr>

</table>

</div>

<div id="videoBox" align="center" style="font-size:36px; font-weight:bold"/>

<div style="display:none">

<xsl:for-each select="instance">

<div id="{@id}">

<table cellpadding="0" cellspacing="0">

<tr><td><xsl:value-of select="@name"/></td></tr>

<xsl:for-each select="boss">

<tr>

<td>

<xsl:choose>

<xsl:when test="./@r!=''"><a href="javascript:void(0)" onClick="setVideoBox('{@r}')"><xsl:value-of select="."/></a></xsl:when>

<xsl:otherwise><a href="javascript:void(0)" onClick="setVideoBox('blank')"><xsl:value-of select="."/></a></xsl:otherwise>

</xsl:choose>

<xsl:if test="./@h!=''"> - <a href="javascript:void(0)" onClick="setVideoBox('{@h}')">[H]</a></xsl:if>

</td>

</tr>

</xsl:for-each>

</table>

</div>

</xsl:for-each>

</div>

</xsl:template>

</xsl:stylesheet>

How the XML format works

Note: this uses an "xml/xsl transformation" widget.
In each tab, select the option for "supplied text" and enter the corresponding code.

clicking "Test Transform" will test changes you've made before saving them

•

Mottie (SuperAdmin)

1/14/2012 7:15 PM EST : RE: Video Box v3

ACK! Mottie Posts: 3873 0 Like 0 Dislike	Hi eVaderum! Nice work! And thank you for sharing your modifications! I'm going to add a link to this post in the Instructions widget to make it easier to find >>help-site<< Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
•

eVaderum (Applicant)

1/14/2012 10:26 PM EST : RE: Video Box v3

Posts: 801

0
Like

0
Dislike

Mottie said:

Nice work! And thank you for sharing your modifications! I'm going to add a link to this post in the Instructions widget to make it easier to find

No Problem! Since you're adding a link to the post, I made a note specifying that the second one uses an xml/xsl transformation widget, and copied over a post I made about how the xml format works with that xsl, which is geared towards being a raid guide video widget.

I'm contemplating modifying the XSL a bit to be more generic. With more options being set on the xml side, like the embed size. Possibly going back to selection boxes, which wouldn't be prone to any skewing in the display based on how many categories there are, or how many videos are in each category.

•

Prev 1 2 3 4

Key

	New posts		No new posts
	New posts ( popular )		No new posts ( popular )
	New posts ( sticky )		No new posts ( sticky )
	New posts ( locked )		No new posts ( locked )

%title%