Bluemix u steam

creating embedded video in web
with Bluemix Ustream Service
Joseph Chang
Senior IT Specialist
IBM Software Group
Document number
© 2014 IBM Corporation
https://ibm.biz/BdEzTZ

Go to Bluemix with this
url:
Source: If applicable, describe source origin

Registration
3
If you haven’t get an id, click Sign up to create one.
Login to bluemix after finishing sign up.

Create an Node.js server
4
Move to catalog. Click SDK for Node.js to create a web server.

Give your web a name
5

View the default web site.
6
Now the web server is running. Click the routes url to lauch the
default sample page.

View the sample web page
7
The sample page looks like this.
Back to bluemix dashboard.

Add UStream service
8
Click “Add A Service”.
Scroll down to find Ustream.
Click it.

Create Ustream Sevice
9
Click CREATE

Load video to Ustream
10
Click Ustream service to lauch the
management console of Ustream.
Click it to go ahead.

Manage Videos
11
Here is ustream for bluemix management
console. Click Manage videos.

Manage Videos
12
You can view the description of your videos.
Click Upload to add a new one.

Upload Videos
13
To load video is simple. Just select it from your
windows file explore and drop it here !!

Upload Videos
14
Drop videos. Fill in description.
Click Start Upload.
The progression is shown here.

Get the Embed HTML Script
15
The video is loaded. We want to embed this video
in the we page. Click the Embed button.

Get the Embed HTML Script
16
Click Copy to clipboard button. Save it
somewhere.
<iframe
src="//www.ustream.tv/embed/recorded/54
778005?wmode=direct" style="border: 0
none transparent;" frameborder="no"
width="480" height="302"></iframe><br
/><a href="http://www.ustream.tv/"
style="padding: 2px 0px 4px; width: 400px;
background: #ffffff; display: block; color:
#000000; font-weight: normal; font-size:
10px; text-decoration: underline; text-align:
center;" target="_blank">Live streaming
video by Ustream</a>
Back to Bluemix
dashboard to modify
web page in Node.js

Edit the web page
17
Click the ADD GIT button. Follow the instruction to
create the source code repository and launch the
editor.

Edit the web page
18
Open the views/body.jade. The source code is show like this:

Insert the tag for embedded video
19
Copy and paste the code to here.
<iframe
src="//www.ustream.tv/embed/recorded/54
778005?wmode=direct" style="border: 0
none transparent;" frameborder="no"
width="480" height="302"></iframe><br
/><a href="http://www.ustream.tv/"
style="padding: 2px 0px 4px; width: 400px;
background: #ffffff; display: block; color:
#000000; font-weight: normal; font-size:
10px; text-decoration: underline; text-align:
center;" target="_blank">Live streaming
video by Ustream</a>

Check-in the code
20
Click Git Repository botton.

2 Enter comment. 3 Commit
Check-in the code
21
1 Click Select All .

Deploy the code
22
4 Click Push All
5 Click Build &Deploy

Deploy the code
23
Check the status of the build & deploy.
6 Click the link to view
the web page

Deploy the code
24
The video is embedded in the web page now !!
View the video at: https://myustream.mybluemix.net

Bluemix u steam

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Bluemix u steam

Similar to Bluemix u steam (20)

More from Joseph Chang

More from Joseph Chang (7)

Recently uploaded

Recently uploaded (20)

Bluemix u steam