Hi,
I'd like to have a forum where (in a controlled way - only selected people could add content) I can post videos in a similar way to what the MSDN Channel9 site looks like.
Has anyone done this?
Has anyone any suggestions for a stripped down boilerplate code that would accomplish this?? I've looked at the source for the Channel 9 site and there is a stack of <script> tags in use referencing javascript code on that site. It isn't too bad and is easily replicated locally on my board web server, but I'd like to start with something simple if possible.
I've had a look around and haven't seen this on any other IPB board. ANy suggestions from this forum?
Ian
Full Version: Embedding a video in a post
It depends what you want to achieve.
You can post any attachment in the forum that you have allowed as a valid mime type but this simply links to the file and does not embed.
If you want to allow members to embed then you would need to allow them to post HTML and they would have to amend the post to use the HTML and link to the file uploaded. This could compromise the security of your board though.
IPG (Gallery) could be your answer as this will allow the uploads and you can predefine the HTML for the mime type and thus members do not need to post HTML.
You can post any attachment in the forum that you have allowed as a valid mime type but this simply links to the file and does not embed.
If you want to allow members to embed then you would need to allow them to post HTML and they would have to amend the post to use the HTML and link to the file uploaded. This could compromise the security of your board though.
IPG (Gallery) could be your answer as this will allow the uploads and you can predefine the HTML for the mime type and thus members do not need to post HTML.
Like I said, I'd lock down the user able to post to be me (board admin), so I have to trust myself that posting HTML is ok 
I want to have the look/feel of what the Channel9 site looks like with the embedded video in it's own virtual player like what you see there.
Ian
I want to have the look/feel of what the Channel9 site looks like with the embedded video in it's own virtual player like what you see there.
Ian
QUOTE(ianhoyle @ Apr 19 2005, 05:06 AM)
Like I said, I'd lock down the user able to post to be me (board admin), so I have to trust myself that posting HTML is ok
I want to have the look/feel of what the Channel9 site looks like with the embedded video in it's own virtual player like what you see there.
Ian
I want to have the look/feel of what the Channel9 site looks like with the embedded video in it's own virtual player like what you see there.
Ian
In which case you are ok ... just upload the file to the server and then make a post with HTML enabled (after enabling HTML for you group in the ACP)
Then code the HTML for the player you wish to use (not sure of exact code but you will find on Google I guess) and within the code link to the file you uploaded.
edit... I found this for embedding realplayer
http://www.uic.edu/depts/accc/itl/realmedi...realplayer.html
and this is the code used on the Channel 9 site you linked.
CODE
<center>
<div class="playercontainer">
<img src="/Photos/58634.jpg" class="videosplash" style="left:0px;z-index:10;width:302;height:227;" />
<div class="player" >
<object height="225"
width="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803"
standby="Loading Windows Media Player components..."
type="application/x-oleobject" VIEWASTEXT>
<param name="Url" value="mms://wm.microsoft.com/ms/msnse/0504/24295/Avalon_Team/avalon_interview_and_demo_MBR.wmv">
<param NAME="autoStart" VALUE="false">
<param NAME="uiMode" VALUE="none">
<param NAME="enabled" VALUE="true">
</object>
<table class="controlstable" cellpadding=0 cellspacing=0>
<tr>
<td nowrap><img alt="play video" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="play('player',this);" src="/themes/default/images/mediaplayer_play_n.gif" /></td>
<td nowrap width="46"><img alt="stop video" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="stop('player',this);" src="/themes/default/images/mediaplayer_stop_d.gif" /></td>
<td nowrap width="154" class="slider" onclick="slide('player',this);"><img align="middle" alt="indicator" height="3" class="indicator" src="/themes/default/images/mediaplayer_indicator.gif" /><img alt="handle" onclick="handle('player', this);" class="indicatorhandle" src="/themes/default/images/mediaplayer_handle.gif" /><img onclick="handle('player',this);" alt="amount downloaded" align="middle" class="downloadindicator" src="/themes/default/images/mediaplayer_download_indicator.gif" /></td>
<td nowrap width="46" align="right"><img class="mediaplayerbutton" alt="toggle sound" onmouseover="hover(this);" onmouseout="out(this);" onclick="mute('player',this);" src="/themes/default/images/mediaplayer_sound_on_n.gif" /></td>
<td nowrap><img alt="launch in external player" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="openPlayer('player',this);" src="/themes/default/images/mediaplayer_FullScreen_h.gif" /></td>
</tr>
</table>
</div>
<table class="controlstablenoscript" cellpadding=0 cellspacing=0>
<tr>
<td width="300" nowrap><a href="mms://wm.microsoft.com/ms/msnse/0504/24295/Avalon_Team/avalon_interview_and_demo_MBR.wmv" title="Launch the streaming media file"><img alt="Launch the streaming media file" border="0" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="play('player',this);" src="/themes/default/images/mediaplayer_FullScreen_h.gif" /></a></td>
</tr>
</table>
</div>
</center>
<div class="playercontainer">
<img src="/Photos/58634.jpg" class="videosplash" style="left:0px;z-index:10;width:302;height:227;" />
<div class="player" >
<object height="225"
width="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803"
standby="Loading Windows Media Player components..."
type="application/x-oleobject" VIEWASTEXT>
<param name="Url" value="mms://wm.microsoft.com/ms/msnse/0504/24295/Avalon_Team/avalon_interview_and_demo_MBR.wmv">
<param NAME="autoStart" VALUE="false">
<param NAME="uiMode" VALUE="none">
<param NAME="enabled" VALUE="true">
</object>
<table class="controlstable" cellpadding=0 cellspacing=0>
<tr>
<td nowrap><img alt="play video" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="play('player',this);" src="/themes/default/images/mediaplayer_play_n.gif" /></td>
<td nowrap width="46"><img alt="stop video" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="stop('player',this);" src="/themes/default/images/mediaplayer_stop_d.gif" /></td>
<td nowrap width="154" class="slider" onclick="slide('player',this);"><img align="middle" alt="indicator" height="3" class="indicator" src="/themes/default/images/mediaplayer_indicator.gif" /><img alt="handle" onclick="handle('player', this);" class="indicatorhandle" src="/themes/default/images/mediaplayer_handle.gif" /><img onclick="handle('player',this);" alt="amount downloaded" align="middle" class="downloadindicator" src="/themes/default/images/mediaplayer_download_indicator.gif" /></td>
<td nowrap width="46" align="right"><img class="mediaplayerbutton" alt="toggle sound" onmouseover="hover(this);" onmouseout="out(this);" onclick="mute('player',this);" src="/themes/default/images/mediaplayer_sound_on_n.gif" /></td>
<td nowrap><img alt="launch in external player" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="openPlayer('player',this);" src="/themes/default/images/mediaplayer_FullScreen_h.gif" /></td>
</tr>
</table>
</div>
<table class="controlstablenoscript" cellpadding=0 cellspacing=0>
<tr>
<td width="300" nowrap><a href="mms://wm.microsoft.com/ms/msnse/0504/24295/Avalon_Team/avalon_interview_and_demo_MBR.wmv" title="Launch the streaming media file"><img alt="Launch the streaming media file" border="0" class="mediaplayerbutton" onmouseover="hover(this);" onmouseout="out(this);" onclick="play('player',this);" src="/themes/default/images/mediaplayer_FullScreen_h.gif" /></a></td>
</tr>
</table>
</div>
</center>
Actually, the latter slab of code is what (as a 1st pass) I used when I created a test post.
Needless to say it looks a complete mess. It makes use of a bunch of functions referenced in a file called "mediaplayer.js" which is defined between a pair of <script> </script>tags. However, when I input these tags they appeared as text within the window and not HTML commands
Is this a bug??
If I have
in my post, it appears as
ie it looks like a parser in IPB doesn't understand these HTML commands, outputting incorrect text and not obeying the the SCRIPT tags.
I'd really love some kind of code boilerplate that looks good (which was kinda the purpose of my orignal post!),
Ian
Needless to say it looks a complete mess. It makes use of a bunch of functions referenced in a file called "mediaplayer.js" which is defined between a pair of <script> </script>tags. However, when I input these tags they appeared as text within the window and not HTML commands
Is this a bug??If I have
CODE
<script src="/mediaplayer.js" language="javascript" type="text/javascript"></script>
in my post, it appears as
QUOTE
<script src="/mediaplayer.js" language="javascript" type="text/javascript">
ie it looks like a parser in IPB doesn't understand these HTML commands, outputting incorrect text and not obeying the the SCRIPT tags.
I'd really love some kind of code boilerplate that looks good (which was kinda the purpose of my orignal post!),
Ian
The JS is specific to the player used and you would need the source file mediaplayer.js to make it work correctly.
In anycase though the post parser in IPB ignores the <script> tag in any HTML posted ... so it would not work even if you had the correct JS source file (as you have seen).
I would use a standard player such as Real player or Windows media player and not bother with the JS. I posted a link for the code to embed the real player.
In anycase though the post parser in IPB ignores the <script> tag in any HTML posted ... so it would not work even if you had the correct JS source file (as you have seen).
I would use a standard player such as Real player or Windows media player and not bother with the JS. I posted a link for the code to embed the real player.
This is for the media player! (see the http reference to the activex web site where it is referenced from a cab file). Better still, try out the Channel9 web site so you can understand how they've designed the interface wrapper around the barebones player.
The mediaplayer.js file is simply a bunch of definitions for controlling the player. Here it is (renamed to a txt file):
Click to view attachment
Ian
The mediaplayer.js file is simply a bunch of definitions for controlling the player. Here it is (renamed to a txt file):
Click to view attachment
Ian
QUOTE(ianhoyle @ Apr 19 2005, 12:01 PM)
This is for the media player! (see the http reference to the activex web site where it is referenced from a cab file). Better still, try out the Channel9 web site so you can understand how they've designed the interface wrapper around the barebones player.
The mediaplayer.js file is simply a bunch of definitions for controlling the player. Here it is (renamed to a txt file):
Click to view attachment
Ian
The mediaplayer.js file is simply a bunch of definitions for controlling the player. Here it is (renamed to a txt file):
Click to view attachment
Ian
I did not realise it was media player and must admit I have not seen that type of player embedding before.
You cannot use it in an IPB post as it needs javascript to function and the post parser will not allow the script tag.
Why not try
http://www.streamalot.com/embed.shtml
Thanks heaps for these suggestions - I really do appreciate it.
I think the reason the Channel9 guys coded their interface as they did was so they could overlay a still image taken from within the video over the top of the player. That way it looks visually more appealing and works to entice the reader to actually play the video snippet.
I really like that metaphor.
ian
I think the reason the Channel9 guys coded their interface as they did was so they could overlay a still image taken from within the video over the top of the player. That way it looks visually more appealing and works to entice the reader to actually play the video snippet.
I really like that metaphor.
ian
Could you add the code for a video into BB code, so that it doesnt get all the HTML parsered out. Have the content of the code to be the URL of the video
Maybe.
I think I need to digest this:
http://download.microsoft.com/download/6/f...gSolutions2.doc
ian
I think I need to digest this:
http://download.microsoft.com/download/6/f...gSolutions2.doc
ian
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.