Solved

Embedding Flash player in webpage

Posted on 2011-09-27
3
577 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

825 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