I've got a flash player (using JWPlayer) that plays an audio file. The file plays fine.
How do I provide the embed code for end-users to copy, so they can post the player and play the audio file on their own site directly? Should I be using HTML <pre> tags somewhere? Or JavaScript to generate the embed code / link?
For example. SoundCloud has:
<object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31988157&show_comments=true&auto_play=false"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31988157&show_comments=true&auto_play=false" type="application/x-shockwave-flash" width="100%"></embed> </object> <span>The Fray by chris_ilett</span>
And YouTube has:
<iframe width="420" height="315" src="http://www.youtube.com/embed/FL7yD-0pqZg" frameborder="0" allowfullscreen></iframe>
What are the benefits of having an <object> and an <iframe>?
Lastly, on the main site. Any time an end-users visits the audio page. The web app increases the views_count. If I am using <object> or <iframe>. Will I still be able to track the number of views somehow?
iframe vs object
The main reason for YouTube's use of <iframe> (i.e. "the benefit") is that it allows them to change how the video is actually displayed - without the website that's embedding the video having to change its <object> element. I.e.:
YouTube can serve different content depending on the browser - i.e., if the browser doesn't have FlashPlayer installed, they could output an HTML 5 <video> element in the <iframe> instead. In the future, you might want to do the same (with an <audio> element), so <iframe> might be a good choice for flexibility in the long term.
It's easier for YouTube to change how the content is output in case of bugs etc. In other words, if for some reason (to mak FlashPlayer 12 behave, for example) they need to add or change a <param> in the HTML or something else, they can do that without every person embedding their videos having to change it themselves.
The code
You would probably use Ruby to output the actual code, although you could use Javascript too - it would need to be generated somehow in order to reflect the exact audio that's supposed to be played. As for putting it in <pre> tags, it's not a technical necessity - just a matter of a better user experience - simply because it's easier to tell where the code starts and ends.
Which tags to use exactly is just a matter of philosophy. Some would say "use a <code> element (to indicate it's code) and style it to display as a block element"; others would say "just us a <pre> element since it's already a block element"; and some would say "Combine the two: <pre><code>...</code></pre>".
Tracking
You can track either. The requests for the audio will always be sent to your server, so it's possible to use tracking in either case. The case of <iframe> is easier to track in the same way you're already doing it, though - since the src of that iframe will just be a link to a simpler version of your audio page (only showing the actual player), you can increase views_count in exactly the same way as in the audio page.
As for <object> advantages
Why does SoundCloud use <object> exclusively? Just guessing here...
Either they just haven't gotten to it yet, or they've decided (quite rightly in some regards) that a completely predictable, working <audio> element is a bit into the future, and not worth it just yet.
Or they have that philosophical dislike of the <iframe> element that some developers have (me included in some ways - I only use it if absolutely no other alternative makes sense).
The user (i.e., the one who's embedding the sound) may also intend to use it in a place where <iframe> would cause troubles, isn't directly supported (e.g. some CMS's) etc.
Also, although I doubt it's their reason, it means one more hit to their server - letting users embed <object> will retrieve the flash content directly. If they use <iframe>, SoundCloud will be hit by an additional request per embed - one for the HTML and one for the audio file (and, for FlashPlayer, one for the swf file).
Related
I am trying to upgrade my site from using swfobject 1.5 to 2.3.2 (latest version), I am unable to get the video to play in Firefox, Chrome, or Safari on Mac. The placeholder is replaced with the outline of the player, but if I right-click in the player region, I get the message: "Movie not loaded...". I have drawn from various examples from the web which all seem pretty straightforward and seem to agree.
I believe the path is valid, as all examples I have seen showed the movie file path to be relative to the hosting page (not relative to the placement of the swfobject.js file, as was with v1.5). In any event, I believe the path is valid for if I use an invalid path, space is not made for the player. I have even tried using an absolute URL. The file itself is also valid, as I can play it without any problem using swfobject v1.5.
I also have tried putting the javascript code in both the head, and also directly under the mediaspace (not simultaneously) but the results are exactly the same.
Here is the embed code:
Javascript (in head):
<script type="text/javascript" src="../media/flash/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF('../media/video/jewels.mp4', 'mediaspace_jewels', '400', '326', '10.0.0');
</script>
HTML:
<div style="text-align:center; width: 640px; margin: 30px auto;" id="jewels_video_container">
<p id="mediaspace_jewels">-- Something went wrong --</p>
</div>
If I examine the generated code in Firefox inspector, it shows:
<object style="visibility: visible;" data="../media/video/jewels.mp4" type="application/x-shockwave-flash" id="mediaspace_jewels" height="326" width="400"></object>
EDIT:
One thing I'm a little confused about, is I have not found an indication of how I reference the player I am using (JWPlayer). In v1.5 it was passed as the first argument in the SWFObject constructor.
EDIT2:
Here is an example:
http://kevinallasso.org/flashexample/html/psychotic.html
The directory structure is exposed for examination.
You're trying to embed an MP4 file. SWFObject only embeds SWFs, you'd then need to have a SWF file that loads your MP4 (such as JWPlayer).
JWPlayer has its own embed code, you don't need to use SWFObject. Also, JWPlayer supports HTML5 playback of MP4s, so Flash wouldn't even be required (but would be available as a fallback for older browsers). https://support.jwplayer.com/customer/portal/articles/1406723
As pipwerks pointed out, arg[0] for swfobject.embedSWF is data, not the movie file, so the Flash player .swf needs to go there (such as JWPlayer). So then how do we get it to play an mp4? How do we tell it what file to play? arg[6] takes flashvars as an object, and thus the filename can be entered as the file property, poster image as the image property. arg[7] takes params as an object.
In essence our code becomes something like:
<script type="text/javascript">
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "my_video.mp4",
image: "video/my_video_poster.jpg"
};
swfobject.embedSWF("video/player.swf",
"demo_video_flash",
"400",
"326",
"10.0.0",
"video/expressInstall.swf",
flashvars,
params);
</script>
The arguments are as follows:
0) location of Flash player swf
1) ID of the element that will be replaced by the player
2) width of video
3) height of video
4) Lowest version of Flash allowed
5) expressInstall.swf - Adobe prompt if version is out of date (see below)
6) flashvars
7) params
The generated code becomes:
<object style="visibility: visible;" data="flash/player.swf" type="application/x-shockwave-flash" id="demo_video_flash" height="326" width="400">
<param value="true" name="allowfullscreen" />
<param value="always" name="allowscriptaccess" />
<param value="file=my_video.mp4&image=video/my_video_poster.jpg" name="flashvars">
</object>
Note that, like SWFObject 1.5, the file property (filename of our movie) is relative to the location of the flash player, and the image property (poster image) is relative to the HTML file.
arg[5], the "expressInstall.swf" argument, points to a flash file which will trigger a prompt to the user to update their Flash version if it is out of date. More on express install: http://learnswfobject.com/the-basics/adobes-express-install/
swfobject.embedSWF actually takes 10 arguments; I don't know what the last 2 are.
As a side note:
While SWFObject 2.3 was updated to give HTML5 support, and also no longer uses <embed> tags but <object> tags instead (see 2nd link below for rationale), it is a Flash embedding tool and not a video embedding tool, and thus does not provide standalone "HTML5 with Flash fallback" support (ie, it will not write <video> tags), as does the embedding code that comes with JWPlayer 6 and 7 and others. HTML5 video support will have to be handled explicitly, as shown in this article: http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback/.
See also: https://github.com/swfobject/swfobject/wiki/SWFObject-and-HTML5.
SWFObject does have an advantage however in that it can be used offline, and also that no data is sent to any entity, if that is a concern. Some players which offer full HTML5 support can only be used online (eg, JWPlayer's full support versions).
I'm trying to embed Windows Media Video into a webpage using a playlist and having the requirement to access the playstate change events and clips through javascript. Therefore I tried several embed possibilities:
object-Tag:
Seems the preverable method, but this won't scale the windows media player. Means, if I put an object tag as written here and set the size to 320x240 but the WMV has higher dimensions (e.g. 640x480) the windows media player always resizes to the video dimensions. This break the page layout and is therefore unusable. Any suggestions here? I tried like every parameter option available for the player, no effect. Access through javascript works with play.currentMedia aso.
embed-Code
Tried this one:
<embed allowscriptaccess="always" allowScriptAccess="always" showcontrols="1" showstatusbar="0" showdisplay="0" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" id="MediaPlayer1" name="MediaPlayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="320" height="240" loop="false" src="PLAYLIST" />
This works in FF, IE6 and 8 (and maybe others - these are the browsers that need to display it). The video is shown in the enforced dimension of 320x240 - good. As I need to access the player to check the playstates through javascript and act if the video changes (as the input is a playlist) this won't work here because I can't access the player properties like currentMedia which works in the object Tag method. Is there a way to access the player playlist somehow?
I'm kinda stuck, because no solution complies with the requirements to enforce a video size and to be able to use javascript to access the players internals.
Maybe someone knows a good solution, I'm open to suggestions - thank you!
I have a horizontal site that has multiple swf files in different "areas". Since the horizontal site is one html page, the browser wants to load all swfs at the get go. This slows the loading of the flash in the initial area to a snail's pace.
What I want to do is be able with javascript to control the initiation of the loading of the various swf files, having it connected to something like an onClick event. I'd like certain buttons when clicked to pause the loading process and yet be able to resume the loading process (not start over) with another event.
Not sure how to approach this. Do I use the id of the containing div of the swf (or the id of the flash itself) and then create a function using getElementById and then control this function with another function using setTimeOut?
I'm at a loss on approach to this. Could use some suggestions and direction.
Thanks,
Adriana
Html:
<object width="1200" height="1200">
<param name="movie" value="mod-1.swf">
<embed swliveconnect="true" src="mod-1.swf" id="mod1" width="1200" height="1200">
</embed>
</object>
JS:
var flashObj = document.getElementById("mod1");
flashObj.GotoFrame('1');
flashObj.StopPlay();
You can't pause the loading of a swf. It is either loading or it isn't. Using swfobject along with the ExternalInterface class (inside of Flash), will let you load one swf at a time.
Of course, if you don't have access to the FLA or Flex project, ExternalInterface won't help, and you'll need to simply use swfobject on a delay.
In order to view an embedded video on a web-page, is it absolutely necessary to have javascript
enabled - assuming the web page is not in the latest HTML5 format and hence has none of
the newer type tags?
I have noticed that YouTube does not work with JS disabled and I was wondering
whether it was a conscious decision on YouTube's part to work only with JS enabled or
did they really have no choice.
The embed code for YouTube is basically an iframe that links to a normal HTML page that uses JavaScript to load in the video you want to see.
In general, you can view video without JavaScript enabled. Most videos are played through Flash, which you can include directly into your page with either an object tag or an embed tag.
There are libraries, such as SWFObject that will put those players into your page for you, but do so through the use of JavaScript. If you want to use a library like that, you will need JavaScript enabled.
Also, if your browser does support HTML5, you can load video directly into the page with the video tag, without the need of JavaScript.
Youtube wants you to have Javascript enabled to deliver advertising.
The player you want to use to embedd the video will tell you if Javascript has to be enabled or not.
Most of the Flash based players work without Javascript enabled, some other don't.
If you are going to embedd a QuickTime video, you don't need to have Javascript enabled to play it
How would I go about seeking or pausing an embedded video (not necessarily a swf) from javascript? I am looking for something like Google's SWFObject's API, but for Windows Media Player, Real Player, Quicktime.
I would check out camen design, that is for backup (in case HTML 5 is not available), then broken links (set the src attribute of the video tag to something else, ironic enough that link to the video is broken), you can easily play/ pause, access volume control, etc using Javascript.
Like ItzWarty said, not many video formats are supported, but you can certainly work it out.