Bluemix 於Nov 2014 增加了Ustram 服務,現在你可以輕易的在網頁中加放影像的功能。It's very easy. 本範例使用Node.js, 透過DevOps 服務修改佈署程式。 想要看範例: http://myustream.mybluemix.net/ 想要了解更多Bluemix請上: https://ibm.biz/BdEzTZ

1. 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

2. © 2014 IBM Corporation
Go to Bluemix with this
url:
Source: If applicable, describe source origin
https://ibm.biz/BdEzTZ

3. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Registration
3
If you haven’t get an id, click Sign up to create one.
Login to bluemix after finishing sign up.

4. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Create an Node.js server
4
Move to catalog. Click SDK for Node.js to create a web server.

5. © 2014 IBM Corporation
Give your web a name
5
https://ibm.biz/BdEzTZ

6. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
View the default web site.
6
Now the web server is running. Click the routes url to lauch the
default sample page.

7. © 2014 IBM Corporation
View the sample web page
7
The sample page looks like this.
Back to bluemix dashboard.
https://ibm.biz/BdEzTZ

8. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Add UStream service
8
Click “Add A Service”.
Scroll down to find Ustream.
Click it.

9. © 2014 IBM Corporation
Create Ustream Sevice
9
Click CREATE
https://ibm.biz/BdEzTZ

10. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Load video to Ustream
10
Click Ustream service to lauch the
management console of Ustream.
Click it to go ahead.

11. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Manage Videos
11
Here is ustream for bluemix management
console. Click Manage videos.

12. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Manage Videos
12
You can view the description of your videos.
Click Upload to add a new one.

13. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Upload Videos
13
To load video is simple. Just select it from your
windows file explore and drop it here !!

14. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Upload Videos
14
Drop videos. Fill in description.
Click Start Upload.
The progression is shown here.

15. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Get the Embed HTML Script
15
The video is loaded. We want to embed this video
in the we page. Click the Embed button.

16. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
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

17. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Edit the web page
17
Click the ADD GIT button. Follow the instruction to
create the source code repository and launch the
editor.

18. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Edit the web page
18
Open the views/body.jade. The source code is show like this:

19. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
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>

20. © 2014 IBM Corporation
Check-in the code
20
Click Git Repository botton.
https://ibm.biz/BdEzTZ

21. https://ibm.biz/BdEzTZ
2 Enter comment. 3 Commit
© 2014 IBM Corporation
Check-in the code
21
1 Click Select All .

22. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Deploy the code
22
4 Click Push All
5 Click Build &Deploy

23. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Deploy the code
23
Check the status of the build & deploy.
6 Click the link to view
the web page

24. https://ibm.biz/BdEzTZ
© 2014 IBM Corporation
Deploy the code
24
The video is embedded in the web page now !!
View the video at: https://myustream.mybluemix.net

25. © 2014 25 IBM Corporation