MCPS Web Publishing System (Tron) Training
Working with Videos
How to upload a video and embed the video on a web page
In this document:
A. How to upload and embed a video on a web page
A. How to Upload and Embed a Video on a Web Page
1. Once you are in the content work area for the content block to which you want to add a
video (see How to Edit a Web Page), place your cursor anywhere on the screen and click
the library icon.
2. Your Tron library will
open. The window will
display images and
files that are in the
library for the folder
(directory) in which
the page you are
editing is stored.
In this example, we are
editing the WNHS folder
on the Northwood HS site.
The content block for this
page "resides" in the
/northwoodhs/wnhs/ folder
on the Web and in the Tron
database. Therefore the
library window will display
the images and/or files that
are stored in the library for
/northwoodhs/wnhs/
Tron Training Materials: Basics of Content Blocks: Uploading & Including Images
2015
Page 1 of 5
3. To upload the video file you need to select "Files" from the pulldown menu in the library
tool bar. (NOTE: You may upload a video file in any of the following formats: .mp4,
.m4v, .f4v, .flv, .mov)
4. To upload a new file, click the add library item icon.
5. On the next screen,
give your file a title.
Then click the
"Browse" button next
to the "Filename" text.
6. Once you’ve clicked
“Browse,” select the
video file via the
Choose file window.
Click “Open”.
7. Back in the Tron library, the "Filename" field is filled in.
8. Click the add library item text.
Tron Training Materials: Basics of Content Blocks: Uploading & Including Images
2015
Page 2 of 5
9. A link to
the video
file has
now
been
inserted
into your
content
block.
You will
delete
this link
after you
copy the
link for
the
uploaded
file.
10. To grab the link (filename and location) of the video file you just uploaded, click on the
Code View “< >” option at the bottom of the Tron content work area.
11. Once in Code View, you will see the link for the video file on the server. It should start
with “/uploadedFiles/schools/your_school_name/your_folder/your_filename.extension”.
Copy the entire link starting with “/uploadedfiles/schools/” and ending with “.extension”.
Paste the link to a place where you can retrieve it or write it down to remember it.
12. Next you will need to delete the link for the video and insert the following embed code in
its place. Replace the link highlighted in yellow with the link you copied in the previous
step, starting with “/uploadedfiles/schools/” and ending with “.extension”. You must be in
Tron Training Materials: Basics of Content Blocks: Uploading & Including Images
2015
Page 3 of 5
Code View when entering the embed code.
(NOTE: This embed code works with video files in any of the following formats: .mp4, .m4v,
.f4v, .flv, .mov)
a) For a small video, use this embed code:
<div id="videoplayer1"></div>
<script type="text/javascript"
src="http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.7/jwplayer.js"></s
cript>
<script type='text/javascript'>
jwplayer('videoplayer1').setup({
flashplayer:
"http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.7/player.swf",
file:
'http://www.montgomeryschoolsmd.org/uploadedFiles/schools/rollinges/welcomevideo.
flv',
image:
'http://www.montgomeryschoolsmd.org/uploadedImages/globalContent/default_video_t
humbnail_small.jpg',
width: 320,
height: 240,
skin:
'http://http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.6/glow.zip'
})
--></script>
b) For a larger video, use this embed code:
<div id="videoplayer1"></div>
<script type="text/javascript"
src="http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.7/jwplayer.js"></s
cript>
<script type='text/javascript'>
jwplayer('videoplayer1').setup({
flashplayer:
"http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.7/player.swf",
file:
'http://www.montgomeryschoolsmd.org/uploadedFiles/schools/rollinges/welcomevideo.
flv',
image:
Tron Training Materials: Basics of Content Blocks: Uploading & Including Images
2015
Page 4 of 5
'http://www.montgomeryschoolsmd.org/uploadedImages/globalContent/default_video_t
humbnail_large.jpg ',
width: 480,
height: 360,
skin:
'http://http://www.montgomeryschoolsmd.org/global/videoplayer/jw/5.6/glow.zip'
})
--></script>
13. To save your change and publish it to your web page, click the publish text as described in
How to Edit a Web Page.
14. Your
video is
now
included
on your
web
page.
You
must
click
Play in
order to
watch
the
video. A
black
screen
with a
blue play
button
will
display
at first.
Tron Training Materials: Basics of Content Blocks: Uploading & Including Images
2015
Page 5 of 5