Back

These instructions are for embedding a single video only. If you want to have a playlist with multiple videos, please have a look at these examples: playlist with normal videos, playlist with streaming videos.
Select single column or half column image below to generate the code.

I want to embed a full column single video

Full column

I want to embed a half column single video

Half column

How to embed a full column single video

Example:

VIDEO TITLE

To view this video please upgrade your Flash Player or turn Javascript on.

05:39s - 19.9MB - Transcript

These instructions assume that both the video (formatted in .mp4 format) and the preview image are ready to be embedded into a web page.

  1. Upload the video and the preview image. They should be uploaded under _SITE_/multimedia/flash-media/ and _SITE_/multimedia/flash-media/previews respectively. For example: _SITE_/multimedia/flash-media/video.mp4 and _SITE_/multimedia/flash-media/previews/preview.jpg Create the folders if they don't exist already.

  2. For Site Manager 2: turn on the site object flash-media for the page that contains the video.

    Make sure the object contains the following: 

    <link rel="stylesheet" href="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.js"></script>
<script type="text/javascript" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/swfobject.js"></script>
<sm object="site flash-media-playlist" />

    For Site Manager 1: copy and paste the following code into the head section of the HTML, usually in the template: 

    <link rel="stylesheet" href="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.js"></script>
<script type="text/javascript" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/swfobject.js"></script>

  3. If the video is NOT in the Streaming Server: copy and paste the following code where you want the video to be and then modify the highligthed sections as necessary:

    • Change the title for the video.

    • Edit the value for file and image with the correct URL.

      Note: if you are embedding this video in a news or event item (using the News or Events Module), do not use <sm object="site url" server="Folders" />. An absolute link should be used instead, for example: http://www.uts.edu.au/thevideo.mp4

    • Edit the video caption with the correct information.
    <div class="flash-media-content full">
	<p class="flash-media-title">VIDEO TITLE</p>

	<div id="mediaholder">
		<p>To view this video please upgrade your Flash Player or turn Javascript on.</p>
	</div>
	
	<script type="text/javascript">
		jwplayer("mediaholder").setup({
			flashplayer: "http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.swf", 
			file: "<sm object="site url" server="Folders" />/multimedia/flash-media/sample.mp4", 
			image: "<sm object="site url" server="Folders" />/multimedia/flash-media/previews/sample.jpg", 
			width: 512,
			height: 288 
		});
	</script>
		
	<p class="video-caption">XX:XXs - XX.XMB - <a href="<sm object="site url" server="Folders" />/multimedia/flash-media/transcripts/transcript.html">Transcript</a></p>
</div>

    If the video is in the Streaming Server: copy and paste the following code where you want the video to be and then modify the highligthed sections as necessary:

    Note: folder name has to be added to the file value. For example, if the mp4 file is in a folder called "xyz" the file value would be "xyz/video.mp4")

    <div class="flash-media-content full">
		<p class="flash-media-title">VIDEO TITLE</p>

		<div id="mediaholder">
			<p>To view this video please upgrade your Flash Player or turn Javascript on.</p>
		</div>

		<script type="text/javascript">
			jwplayer("mediaholder").setup({
				streamer: 'rtmp://138.25.225.203/vod',
				file: 'folder/video.mp4',
				image: '<sm object="site url" server="Folders" />/multimedia/flash-media/previews/sample.jpg', 
				width: 512,
				height: 288,
				modes: [
					{ type: 'flash', src:'http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.swf' },
					{
						type: 'html5',
						config: {
							file: 'http://LINK TO THE LIVE VIDEO/video.mp4',
							provider: 'video'
						}
					},
					{
						type: 'download',
						config: {
							file: 'http://LINK TO THE LIVE VIDEO/video.mp4',
							provider: 'video'
						}
					}
				] 
			});
		</script>
		
	
		<p class="video-caption">XX:XXs - XX.XMB - <a href="<sm object="site url" server="Folders" />/flashe-media/transcripts/transcript.html">Transcript</a></p>
	</div>

How to embed a half column single video

These instructions assume that both the video (formatted in .mp4 format) and the preview image are ready to be embedded into a web page.

  1. Upload the video and the preview image. They should be uploaded under _SITE_/multimedia/flash-media/ and _SITE_/multimedia/flash-media/previews respectively. For example: _SITE_/multimedia/flash-media/video.mp4 and _SITE_/multimedia/flash-media/previews/preview.jpg Create the folders if they don't exist already.

  2. For Site Manager 2: turn on the site object flash-media for the page that contains the video.

    Make sure the object contains the following: 

    <link rel="stylesheet" href="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.js"></script>
<script type="text/javascript" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/swfobject.js"></script>
<sm object="site flash-media-playlist" />

    For Site Manager 1: copy and paste the following code into the head section of the HTML, usually in the template: 

    <link rel="stylesheet" href="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.js"></script>
<script type="text/javascript" src="http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/swfobject.js"></script>

  3. If the video is NOT in the Streaming Server: copy and paste the following code where you want the video to be and then modify the highligthed sections as necessary:

    • Change the title for the video.

    • Edit the value for file and image with the correct URL.

      Note: if you are embedding this video in a news or event item (using the News or Events Module), do not use <sm object="site url" server="Folders" />. An absolute link should be used instead, for example: http://www.uts.edu.au/thevideo.mp4

    • Edit the video caption with the correct information.
    <div class="flash-media-content">
	<p class="flash-media-title">VIDEO TITLE</p>
	
	<div id="mediaholder">
		<p>To view this video please upgrade your Flash Player or turn Javascript on.</p>
	</div>
	
	<script type="text/javascript">
		jwplayer("mediaholder").setup({
			flashplayer: "http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.swf", 
			file: "<sm object="site url" server="Folders" />/multimedia/flash-media/sample.mp4", 
			image: "<sm object="site url" server="Folders" />/multimedia/flash-media/previews/sample.jpg", 
			width: 290,
			height: 163 
		});
	</script>

	<p class="video-caption">XX:XXs - XX.XMB - <a href="<sm object="site url" server="Folders" />/multimedia/flash-media/transcripts/transcript.html">Transcript</a></p>
</div>

    If the video is in the Streaming Server: copy and paste the following code where you want the video to be and then modify the highligthed sections as necessary:

    Note: folder name has to be added to the file value. For example, if the MP4 file is in a folder called "xyz" the file value would be "xyz/video.mp4")

    <div class="flash-media-content">
	<p class="flash-media-title">VIDEO TITLE</p>
	
	<div id="mediaholder">
		<p>To view this video please upgrade your Flash Player or turn Javascript on.</p>
	</div>
	
	<script type="text/javascript">
		jwplayer("mediaholder").setup({
			streamer: 'rtmp://138.25.225.203/vod',
			file: 'folder/video.mp4',
			image: '<sm object="site url" server="Folders" />/multimedia/flash-media/previews/sample.jpg', 
			width: 290,
			height: 163,
			modes: [
				{ type: 'flash', src:'http://datasearch2.uts.edu.au/common-assets/jwmediaplayer/jwplayer.swf' },
				{
					type: 'html5',
					config: {
						file: 'http://LINK TO THE LIVE VIDEO/video.mp4',
						provider: 'video'
					}
				},
				{
					type: 'download',
					config: {
						file: 'http://LINK TO THE LIVE VIDEO/video.mp4',
						provider: 'video'
					}
				}
			] 
		});
	</script>
	
	<p class="video-caption">XX:XXs - XX.XMB - <a href="<sm object="site url" server="Folders" />/flashe-media/transcripts/transcript.html">Transcript</a></p>
</div>

Example:

VIDEO TITLE

To view this video please upgrade your Flash Player or turn Javascript on.

3:03s - 10.6MB - Transcript