// Edit: The issue now appears to be confined to Safari for Windows.
Around the time Safari for Windows 4 came out I started hearing from users that wmode=transparent was no longer working in Safari.
I have googled this many times but have not come up with any answers. I have tried reducing interference by using tags as opposed to scripts to embed the Flash but with no success.
An example is here: http://hiv411.org/safari.php alternately embedded with script at http://hiv411.org/
All videos use wmode=transparent and are embedded via tags. All work fine in every browser I have except Safari.
Code looks like so on safari.php
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="test" width="289" height="263" align="middle" id="test">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="swfs/BBattLeft.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
</object>
Much obliged for any help!
UPDATE: The problem is with the flash player for windows safari but has been solved after Flash Player version 10.0.45.2
Yes, It is only with Safari on Windows!
And it's interesting that there is not much written about this on the internet I've been experiencing the same issue, I guessed at first that it has a default value of #FFFFFF for bgcolor and I tried setting it to transparent (not wmode but bgcolor!). it still works in every other browser but it had a green color in Safari (so don't try that! and no the bug is not with the word transparent not being defined! I tried!).
Seems that we have to wait for apple to fix it in the next versions but if you want to change the background color if you only have a solid color underneath you can use:
if you're using the adobe script or javascript to display the flash (recommended)
<!--html-->
<script src="[adobe flash detector script]">
AC_FL_RunContent( 'wmode', 'transparent','bgcolor', 'xxxxxx');
</script>
>
else if youre using embed and or for the <noscript>:
<param name="wmode" bgcolor="#xxxxxx" value="transparent">
...aslo
<embed wmode="transparent" bgcolor="#xxxxxx">
if you wanna detect safari on windows and not display it - or maybe give the the least zindex:
//Javascript:
var isSafari = (navigator.userAgent.indexOf("Safari") != -1) ? true : false;
var isWindows = (navigator.userAgent.indexOf("Windows") != -1) ? true : false;
if (isSafari && isWindows) document.getElementById('yourflashid').style.display = 'none';
if (isSafari && isWindows) document.getElementById('yourflashid').style.Zindex = '-1000';
>
if you have php it's better to do it with php as changing DOM elements with js makes page load slower and requires javascript
<?php
//PHP
/* i like to make a .php external css style sheet
(you have to have a transitional HTML document!
or most browsers will not read it beacuse of difference in MIME types!)*/
function agent($browser) {
$useragent = $_SERVER['HTTP_USER_AGENT'];
return strstr($useragent,$browser);
}
if(agent("Safari") != FALSE) {
if(agent("Windows") != FALSE) { // on windows
?>
#myflash {display:none;}
#verisignflash {z-index:-100; /* for example I already made #000 bgcolor for this and looks right*/
<?php
} //All Safari's
}
... and then the code for Safari in general as the rest seem to be compatible! however you can add and else statement here and seperat them
If someone finds a better option I will be glad to read it here!
I have the same problem with Safari for Windows.
But after I've updated my Flash Player to version 10.0.45.2,
the problem is gone.
So I think it's a Flash player bug.
Related
Please review this page.
The embedded video plays when the page is viewed on a mobile device but not when viewed on a computer (tested on two laptops running Windows 8 and 10, on Chrome, FF, and Edge).
This issue only exists with YouTube videos and the problem began 48 hours ago (approx.)
For example, see this YouTube URL (no video is being loaded):
http://www.youtube.com/v/RCsJHHUkisw&rel=0&color1=0x054b81&color2=0xe2e2e2&hd=1&showinfo=0&enablejsapi=1&playerapiid=ytplayer&fs=1
I have managed to handle this problem by rewriting the emvideo module.
I am currently using the module version = "6.x-1.26".
I didn’t take the time to change the entire module;
I changed only the parts I needed:
All the changes were made in this file:
\sites\all\modules\emfield\contrib\emvideo\providers\youtube.inc
In function theme_emvideo_youtube_flash line 444 I changed the line
$url = check_plain("http://www.youtube.com/v/$code&$related$autoplay_value$colors$border$high_quality$display_info$enablejsapi$fs");
to
$url = check_plain("https://www.youtube.com/embed/$code"); .
What I did was to look at the youtube embed code and try to make the link look the same.
Next step was to change the FLASH output, in line 566 function
theme_emvideo_youtube_default_external and change the next content:
<div id="$div_id">
<object type="application/x-shockwave-flash" height="$height" width="$width" data="$url" id="$id">
<param name="movie" value="$url" />
<param name="allowScriptAccess" value="sameDomain"/>
<param name="quality" value="best"/>
<param name="allowFullScreen" value="$fullscreen_value"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="scale" value="noScale"/>
<param name="salign" value="TL"/>
<param name="FlashVars" value="$flashvars" />
<param name="wmode" value="transparent" />
</object>
</div>
To
<div id="$url"><iframe width="$width" height="$width" src="$url" frameborder="0" allowfullscreen></iframe></div>
And that’s all…
Hope it helps a bit…
The following should be pretty close to a drop-in replacement for what's currently being served on the page referenced in the question (the object tag with id emvideo-youtube-flash-2):
<iframe id="ytplayer" type="text/html" width="590" height="499"
src="https://www.youtube.com/embed/Je2vE5RLJ6o?rel=1&showinfo=0&enablejsapi=1&fs=1&origin=http://www.islandcricket.lk/"
frameborder="0" allowfullscreen>
A few things about the implementation currently being served:
Using object tag and the embed URLs of the form youtube.com/v/video id (which only serves a Flash player, not HTML5) to embed YouTube videos has been deprecated for over a year.
the player parameter hd is deprecated. The iFrame player (used in the above code), will automatically chose the best quality to display based on a variety of parameters. If you wish to control this you can use the Javascript API.
the rel, showinfo, enablejsapi and fs parameters should continue to function as they have in the previous implementation (parameter documentaion here)
The allowScriptAcess parameter set to sameDomain in the current implementation is replaced by the origin parameter and should be set to the URL severing the webpage (documented here)
Screenshot of the above code working on islandcricket.lk tested via webdev tools:
I can't get p:media to work, tested with Chrome and IE, different Quicktime- and Windows-types over StreamedContent (see example below) and by referencing it from the resources-folder (value=/resources/clear.avi) of my webapp. No video starts to play although loading & rendering seems to be "working" per se. The player shows up and the loaded video seems not to be broken while the files aren't for sure (playing works on desktop usage). When using StreamedContent, I start to render after loading the video.
My config:
PrimeFaces 3.5
Apache MyFaces 2.1.12
Jetty 9.0.4
What can be wrong here?
<h:panelGroup id="video">
<p:media value="#{contentEditorBean.media}" width="250" height="190" player="windows" rendered="#{contentEditorBean.media != null}">
<f:param name="autoPlay" value="false" />
</p:media>
</h:panelGroup>
Let's take this simple HTML:
<html>
<body>
<!-- Object Tag For the Audio Player -->
<object id="mpAudio" width="100%" height="100%"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject" align="middle">
<param name="URL" value="http://servername/media/Alt.TÉst/default.wav" />
<param name="AutoStart" value="True" />
<param name="UIMode" value="Full" />
<param name="EnableContextMenu" value="True" />
<param name="WindowlessVideo" value="True" />
<param name="Mute" value="False" />
</object>
</html>
Notice in the URL there is this unicode character: É
When I open that html file, the audio plays as a garbled mess. Of note, in some older VM I have (for random IE6 testing), which has an O/S of 2003 Standard Edition, an IE 6 browser, and Windows Media Player 6.4.09.1130 .. it works, fine! My testing where it's a garbled mess, involves Windows 7, IE 10, and WMP 12.0.7601.17514
I thought the solution may be % encoding the URL. That's even worse. The encode became: http%3A%2F%2Fservername%2Fmedia%2FAlt.T%C3%89st%2Fdefault.wav
And I went from at least being able to play a garbled mess, to not playing anything at all.
One other test:
Taking the non-encoded url and putting it in Firefox, opens the wav (so Firefox is OK with the unicode character). Taking the encoded url, I get "server not found". I guess I don't know how to encode!
Barring eliminating unicode for data entry (these URLs are generated from Username's, where in some locales they allow unicode characters in the name), how do I make this work?
Thanks.
I thought the solution may be % encoding the URL. That's even worse. The encode became: http%3A%2F%2Fservername%2Fmedia%2FAlt.T%C3%89st%2Fdefault.wav
The solution should be to URL-encode path components, rather than the whole URL. You want to end up with:
http://servername/media/Alt.T%C3%89st/default.wav
Although, I would have expected the fail case to get a 404 and just not play anything—garbled audio is a weird result. There might be a different issue as well?
Forgive me if this is the wrong venue for this problem, but Google's deprecated developer forums recommend I go here.
Following is some heavily-simplified code meant to demonstrate the problem:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(
function() {
/*
This one second delay is just there to give the player time
to load. It's more complicated in my proper implementation.
*/
window.setTimeout(
function() {
var player = document.getElementById('player');
/*
Shocker, it doesn't work, regardless of playlist ID.
*/
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A'
}
);
},
1000
);
}
);
</script>
</head>
<body>
<object data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3" height="360" id="player" width="600">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
</object>
</body>
</html>
I've stumbled on this very problem while on a coding sprint, this week:
The loadPlaylist/cuePlaylist methods require both the list parameter and the listType parameter (it isn't very clear in the docs).
So, the code:
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A',
listType: 'playlist'
}
);
Should work fine, both with SWF and HTML embeds. Jeff Posnick's recomendations on his answer to this question apply as well of course, but I've tested it to work in both scenarios.
listType can be 'list', 'search' or 'user_uploads', and list represents a list id or array of video ids, a search query, ou a user id, respectively.
A few comments on your code before getting to the question: first, if you're sure that you need to use the AS3 chromeless player, you really should use SWFObject to add it to your page to ensure that the proper <object> and <embed> tags are both used. If you only specify <object> tags then it will only work in Internet Explorer.
Also, you should have a onYouTubePlayerReader(playerId) handler in your code to detect when the player is fully loaded and ready to respond to API calls. That's much, much more reliable than attempting to do that via a window.setTimeout().
Regarding your actual question, I'm not sure that the chromeless AS3 player ever supported working with playlists. Was this code previously working that recently stopped? I'd imagine that you'd have a much better experience using the iframe embedded player and specifying controls=0 if you really don't want controls (but hiding the controls takes away from the playlist experience).
I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.
I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.
The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):
<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>
While Vimeo videos need the following HTML for being displayed:
<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>
Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.
So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?
Well, you should write your own plugin (it is pretty simple) to check for changes the user made.
When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).
Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):
// you may choose an other event to check for
ed.onChange.add(function(ed){
var body = ed.getBody();
// check for vimeo using jquery object
$(body).find('param').each(function(index, Element){
// vimeo adress is found in value
if (this.value.search('http://vimeo.com') == -1) return;
var node = this;
var iframe_not_parent = 1;
while(node.nodeName !== 'body'){
node = node.parentNode;
if (node.nodeName !== 'iframe'){
iframe_not_parent = 0;
break;
}
}
// ok, this vimeo thing is not inside an iframe - put it inside
if (iframe_not_parent){
with(document.getElementById(iframe_id).contentWindow){
var new_iframe = document.createElement("iframe");
this.parentNode.parentNode.append(new_iframe);
new_iframe.append(this.parentNode);
}
}
});
});