Solved

Embedding Flash player in webpage

Posted on 2011-09-27
3
573 Views
Last Modified: 2012-05-12
I need to stream videos into the members-only area of a website.  Overall demand will be small, but it may have spikes.  Cost is a consideration for the website owner, a small professional body.

We are trialling Amazon S3 + EC2+ Cloudfront + embedded JW Player.  The S3 bucket contains two small MP4 files in the main bucket, together with a sub-folder holding:
jwplayer.js
swfobject.js (version 1.5)
player.swf

The trial page HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Streaming Trial</title>
<script type="text/javascript" src="http://biostrial.s3.amazonaws.com/jwplayer/swfobject.js"></script>
</head>
<body>
<p>Arnoldi</p>

<div id='container'>The player will be placed here</div>

<script type="text/javascript">
  var flashvars = {

    file:'Arnoldi.mp4',
    streamer:'rtmp://s2y98ylrybvg3y.cloudfront.net/cfx/st/'
  };

  swfobject.embedSWF('http://biostrial.s3.amazonaws.com/jwplayer/player.swf','container','480','270','9.0.115','false', flashvars,

   {allowfullscreen:'true',allowscriptaccess:'always'},
   {id:'jwplayer',name:'jwplayer'}

  );
</script>


<!-- <embed
	flashvars="type=rtmp&amp;streamer=rtmp://s2y98ylrybvg3y.cloudfront.net/cfx/st/&amp;file=Arnoldi.mp4">
   id="xvideo-3715"
   type="application/x-shockwave-flash"
   width="320"
   height="260"
   src="http://biostrial.s3.amazonaws.com/jwplayer/player.swf"
   quality="high"
   allowfullscreen="true"
   wmode="transparent"
</embed> -->

</body>
</html>

Open in new window


The embedding code comes from the JW player site (http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/13/embedding-flash).  The other version, commented out, is from Learning API (http://www.learningapi.com/streamingmedia-articles/amazon-cloudfront-streaming/) - it looks wrong to me, but other people seem to have made it work.

Neither work for me.  I am assuming that this is because I am doing something obviously wrong, perhaps because my knowledge of Javascript is effectively non-existent.

Where have I gone wrong?
0
Comment
Question by:hnmcc
3 Comments
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 36712505
I can see two problems
1) SWFObject is case sensitivity

2) you have to use old declaration of JavaScript (base on your JS URL)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Streaming Trial</title>
<script type="text/javascript" src="http://biostrial.s3.amazonaws.com/jwplayer/swfobject.js"></script>
</head>
<body>
<p>Arnoldi</p>

<div id='container'>The player will be placed here</div>

<script type="text/javascript">
var so = new SWFObject('http://biostrial.s3.amazonaws.com/jwplayer/player.swf','jwplayer','480','270','9.0.115');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','file=Arnoldi.mp4&streamer=rtmp://s2y98ylrybvg3y.cloudfront.net/cfx/st');
so.write('container');
</script>
</body>
</html>

Open in new window

0
 
LVL 37

Expert Comment

by:CyanBlue
ID: 37337168
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now