A 'player' for all kinds of online video's

[molendijk]

1) CODE TITLE: A 'player' for all kinds of online video's

2) AUTHOR NAME/NOTES: Arie Molendijk

3) DESCRIPTION: This is a player for all types of online video's, more specifically, for video's provided by YouTube, TubeChop, DailyMotion and Google Video. Well, it isn't really a player, but a script that makes online video's behave in a certain way defined by the script. For instance, no video loaded by the script will open in a new window when the user (accidentally) clicks on the video screen. (Either nothing happens or the video pauses). More generally, the online video's adapt to the script in such a way that they seem to be produced by a real player. For each video, the script provides information about the URL and the way the video can be included in a page (valid include, no embed). And for each video, there's a link to the site providing it. Comments more than welcome.
This is an enhancement of a script I posted some time ago HERE.

4) URL TO CODE: http://www.let.rug.nl/molendyk/inclu...o7a/video.html

[jscheuer1]

An alert for Opera? Bad form. Opera can be worked with. Flowplayer:

http://flowplayer.org/

has no problem.

[molendijk]

An alert for Opera? Bad form.

Or Bad Opera? It's the only modern browser that has this problem. I'm looking for a way to resolve it.

Opera can be worked with. Flowplayer: http://flowplayer.org/has no problem.

The problem with the flowplayer is that it does exactly what I wanted to avoid: it opens video's by TubeTube and DailyMotion in a new window (the provider's window, with all the info you may not want to see) when the user (accidentally) clicks on the playing video. See this movie, for instance (click on it).
This problem can be avoided by adding <param name="allowNetworking" value="internal" /> to the code, like here, but then the video will often freeze when the user clicks on the YouTube logo to the bottom right.
My script does not have any of those problems, and offers more options than Flowplayer. But I should resolve the Opera-problem, of course.
===
Arie
===

[jscheuer1]

I'm not inclined to test all of your assertions about your player vs flowplayer at the moment. Flowplayer does have a lot of options. But, assuming you are correct, it might be better in the meantime to just skip the alert in Opera, let the chips fall where they may. You can continue to work on the interface for that browser.

One thing I can tell about Opera though is that it needs the script to write the Flash tag to be external. But you probably already knew that.

[djr33]

I agree with John: this is not an extra feature for a page, but an improvement on an existing feature. Opera should not behave as if there is an "error", but at worst revert to the normal behavior.
This script is useful, but if a browser does not support it it should just use the default (or perhaps some of your script if you can't get all of it working for every browser). And, yes, of course you can keep working on it in the future.

To relate this to another script, there are several WYSIWYG text editor scripts for text boxes. These are useful, but they only work in certain browsers (with no way to get them working in some others). So they work by adding the features if the browser supports them and if not just using a regular textbox, without some warning that the browser is not compatible.

In this case it may make sense to have a note on the main page of a website "Please use Firefox or IE to have access to all features of this site", but there's no reason to have a negative addition when using Opera, etc. Instead, the script just won't work. (And that's ok-- they can get a "better" browser if it doesn't work, or you can in the future find a way to make the script work for opera).

[molendijk]

Well, I managed to get the script work in Opera too. The fix was to make sure that an invisible div (having 'position:absolute; bottom:0px, left:50% (anything below 100%); z-index:1') would overlap with the video window. Very weird!

Things would have been OK right from the start (in Opera) if I would have used <param name="wmode" value="window">. But I needed value="transparent" in order to make the player work the way it does.

Googling around, I found that Opera had some reputation in not always handling value="transparent" well. For instance, what the author of this page says about Firefox applies to Opera as well (it still does). See also this for other issues.

I did not have the intention of maltreating Opera in any way. Just a prompt to warn users about a problem (that has been fixed for the time being; I'm still looking for a better fix).

Anyhow, I'm glad the script works in Opera too, now.
===
Arie.
===

[djr33]

I don't have opera to test it, but glad to hear it. I didn't mean to say you were treating opera badly, but just that a warning is generally not a good idea for a non-required script. This just improves the situation and opera users would get a warning instead of benefit.
At worst an "improvement" script should remain invisible in an incompatible browser. (This of course changes once some content is only accessible through the script-- then an alert is required.)

[jscheuer1]

I've never had a problem with Opera or Firefox as regards wmode transparent. Opera is my primary browser for surfing the net. I test all of my professional code (and, more often than not, my experimental code) in it and several others, including IE. Firefox is my system's default browser. It is one of the browsers I test all of my code (regardless of whether its experimental or professional) in. I also like Firefox because its optional diagnostics (the developer extension utilities) are (I find) the most intuitive and direct of all available either as standard or as options for any browser. I could go into more detail on that if you wish.

However, my main point here is as regards the wmode transparent business. It works in Opera and Firefox, insofar as rendering Flash objects in such a way that they may be behind ordinary and/or script generated HTML content.

The articles you cite in this regard refer to older versions and/or relatively minor issues. What exactly is the problem you are having?

I too sometimes get too involved in getting everything perfect that I risk losing sight of a real benefit of some code I or someone else has written. Consider this concept in regard to your own code. It may actually be better than you think.

That said, I find it difficult to imagine that:

an invisible div (having 'position:absolute; bottom:0px, left:50% (anything below 100%); z-index:1') would overlap with the video window

would do anything, let alone anything good. What exactly does it improve? And do you have any idea as to why it does? Often these sort of manipulations/hacks/workarounds, whatever you want to call them, are unnecessary if you use valid code to begin with.

For example, are you using the embed tag? If so your code is invalid.

[molendijk]

I've never had a problem with Opera ... as regards wmode transparent.

John, I brought the problem down to the following. This works in all browsers except Opera (ignoring an IE-complication; not relevant here):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title></title>

<script type="text/javascript">
function get_movie(id,url,width,height,left,top)
{
document.getElementById(id).innerHTML='<object type="application/x-shockwave-flash" style="position:absolute;left:'+left+'; top:'+top+'; height:'+height+';width:'+width+';" data="' + url + '" ><param name="movie" value="'+url+'" ><param name="allowFullScreen" value="true" ><param name="wmode" value="transparent" ><param name="flashvars" value="autoplay=true" ><param name="allowNetworking" value="internal" ><param name="allowScriptAccess" value="never" ><\/object>'
}
</script>

</head>

<body>

<p><a style="cursor:pointer" onclick="get_movie('receiver','http://www.youtube.com/v/oQgulL_30n8&amp;hl=nl&amp;fs=1&amp;autoplay=1&amp;showinfo=0&amp;rel=0&amp;start=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1','80%','85%','19%','9%'); ">Start video</a></p>

<div style="position:absolute;top:30%;background:red;left:40%;z-index:1">bbbbbbbbbbbbbb</div>

<div id="receiver"></div>

</body>

</html>

The video DOES play in Opera if we replace 'transparent' with 'window', so Opera seems to have a wmode-problem.
Now, I want 'transparent'. We can keep 'transparent' if we add <div style="position:absolute;bottom:0px;left:0px;">&nbsp;</div> to the body. There will be no problem in Opera anymore.
So it works in Opera now, but why? Over my head.
Note: making the script external doesn't help Opera.
===
Arie.
===

[jscheuer1]

I see what you mean. This also worked:

<div style="float:left;" id="receiver"></div>
<div style="clear:left;">&nbsp;</div>

Both quite strange I agree. Perhaps something to do with stretching the window at a level more significant than merely adding an ordinary div (which doesn't work) at the end does. This however:

<script type="text/javascript">
function get_movie(id,url,width,height,left,top)
{
document.getElementById(id).innerHTML='<object type="application/x-shockwave-flash" style="position:absolute;left:'+left+'; top:'+top+'; height:'+height+';width:'+width+';" data="' + url + '" ><param name="movie" value="'+url+'" ><param name="allowFullScreen" value="true" ><param name="wmode" value="transparent" ><param name="flashvars" value="autoplay=true" ><param name="allowNetworking" value="internal" ><param name="allowScriptAccess" value="never" ><\/object>'
}
</script>

should be an external script to avoid the 'click to activate' feature in both IE and Opera.

Adding this to the beginning of your function:

if(window.opera && !get_movie.of){
get_movie.of = document.createElement('div');
get_movie.of.style.position = 'absolute';
get_movie.of.style.bottom = 0;
get_movie.of.style.left = 0;
document.body.appendChild(get_movie.of);
}

Also works.