I have been trying using media player in web page to stream RTMP videos. I have using following code
<embed allowfullscreen="true" src="http://www.focusonthefamily.com/family/JWPlayer/mediaplayer.swf" flashvars="allowfullscreen=true&allowscriptaccess=always&autostart=false&shownavigation=true&enablejs=true&volume=50&file=Test.mp4&streamer=rtmp://192.168.0.102/vod/&image=vid/100_2255.JPG" />
Now it showing simple classic jwPlayer. How can i apply styles to it using css or skin
Skins included in the Pro/Premium/Ads editions can be configured by simply inserting the skin name. Here's an example, loading the bekle skin:
jwplayer("myElement").setup({
file: "/upload/myVideo.mp4",
skin: "bekle"
});
You're using JW Player 5, which is obsolete. Get JW Player 6. I've found that it's always safest to wrap the player in an outer <div>, and apply all styling to that outer <div>. So, your setup would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JW Player</title>
<script src='jwplayer.js'></script>
</head>
<body>
<p>Streaming Video</p>
<div id='player'><div id='myElement'>Loading the player...</div></div>
<script>
jwplayer("myElement").setup({
file: "rtmp://example.com/application/mp4:myVideo.mp4",
image: "/assets/myVideo.jpg",
height: 360,
width: 640
});
</script>
</body>
</html>
Then apply your CSS to the "player" ID.
Are you sure you want to use RTMP? Is this a "live" video feed? If you're just providing MP4's, there's no need to use streaming. RTMP is Flash, which won't work on any mobile, whereas simply providing MP4's will work everywhere.
Related
Was using embed to play Flash SWF files to play random background music with no controls. Since Flash is going away, I want to replace it using <audio> tag with controls. Have a folder named music containing multiple MP3 files with simple names (Song1.mp3,song2.mp3,etc.). I have a script that generates a random number for variable Whichsong
(WhichSong="Music/song"+(Math.floor(Math.random()*23))+".swf"
That varible is used as the path to the song to play
(document.write('<embed src="'+WhichSong+'" quality="high" width="0" height="0")
I have seen the code here that suggests that I can use a similar method to put URL information in the <Audio SRC="'+WhichSong+'" > tag. However, nothing I have tried has worked. I've tried with/without quotes, with/without +, with/without ', and various combination of all. Nothing works. No sound, no controls.
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center" id="soundtrack"></div>
<script type="text/javascript">
var WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"
document.getElementById('soundtrack').innerHTML="<audio controls id='background_audio1'><source src='music/5.mp3'>Your browser does not support the audio element.</audio>";
</script>
</body>
</html>
The WhichSong variable isn't going to be interpreted within your innerHTML string if the whole thing is quoted. You'd need to either break out of the quotes:
"<source src=\"" + WhichSong + "\"></source>", or use a template string as in the example below. Other than that it seems to be fine.
function setSong () {
const WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"
document.getElementById('soundtrack').innerHTML=`
<audio controls
id='background_audio1'>
<source src='${WhichSong}' />
Your browser does not support the audio element.
</audio>
<div>${WhichSong}</div>
`;
}
<div id="soundtrack"></div>
<button onClick="setSong()">Set Song</button>
In the project, I'm working on we have 4 individual websites and one shell to host all. The team is using Angular 2.0.0. Their approach they choose is embedding each website inside shell application (Using object tag). So that the Dom in high level look like
<html>
<head>
</head>
<body>
<object type="text/html" data="http://website1.com/#/" style="width:100%; height:100%">
<html>
<head>
</head>
<body>
Content of the Website 1
</body>
</html>
</object>
</body>
<html>
I am working as a FE dev and to me, this sounds so wrong! why? because I have html { with: 100%, width: 100% } and because we have 2 html tag nested it ruins the style. I believe there must be a better to just embed the content of the websites1.
Would you please give me your thoughts about the best way to do this and potentially not having 2 html and body tags nested.
I'd appreciate
I have a html5 banner that I've been supplied with that has some animations and so on. How would I embed this inside an already existing html document? I don't want to grab the code from the html5 document, instead it would be nice if I could link to the html5 banner..
I don't know if this is possible though.
<html>
<body>
<!-- Embed html5 banner here -->
<div src="/assets/html5banner.html" /> <!-- Something like that, I don't know -->
</body>
</html>
Any push in the right direction would really be appreciated! Thanks
Use iframe to embed other html document into your page
<iframe src="#"></iframe>
iFrames are your friends.
<iframe src="/htmlanim.html"></iframe>
You can also be fancy-shmancy and use Ajax to append the content dynamically to an empty <div>-Container.
You should just use an iframe.
I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after the conversion in the landing. I was looking for information about this and finally tried to get this done using:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
With Firefox this great, but with Chrome it seems that the XHR calls are cached in a different cache than the css and js files.
We don´t use JQuery, the landing page must be lightweight (less load, more conversion rate).
Do you have any recommendation of another way to solve the original problem? (preload components)
Do you know how to make Chrome cache these requests?
This is a tested solution in a high volume site that works.
First, to avoid a competition between the landing page resources and the preloaded resources for the bandwith you could delay the load with javascript:
var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
if(prevOnLoad) {
try{
prevOnLoad();
}catch(err){
}
}
preloadSiteComponents();
}
window.onload=onLoadPreloadComponents;
This is not the way I solved this because in my use case a flash event (using the Flash to JS brigde) signals when the landing was finally loaded. But the previous code must works as well. When the load page event is fired by the browser this function will execute previous onLoad code and the preloading.
I put an empty div cointainer where the iframe will be loaded.
<div id="mainSiteComponentsContainer" style="display: none;">
</div>
And the function code is:
function preloadSiteComponents() {
try{
document.getElementById('mainSiteComponentsContainer')
.innerHTML=
"<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
}catch(err) {
}
}
As you could see, the link url to iframe is dynamic, it changes between differents plataform versions (different deployments) to avoid unwanted browser cache with a new deployments.
The HTML that will be in the iframe could be something like this (for example):
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
Here you could see the links to the components that I want to preload.
Finally, the div cointainer will have the iframe. After the onLoad event:
<div id="mainSiteComponentsContainer" style="display: none;">
<iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
</iframe>
</div>
You could see the working solution here.
Use Firebug to see the delayed load of this components.
Random thought:
Maybe you could include a hidden IFrame in your landing page which loads a page that does nothing but include your javascript and CSS files. If you trigger the loading of that IFrame in your javascript then it shouldn't block the landing page's loading or rendering, yet the script and css files would be loaded by the browser in the same way that it would for any other page.
Haven't tried this but adding this to the BOTTOM of your landing HTML should work:
<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">
The browser doesn't actually care that the resources aren't images it should fetch and cache them anyway. Browser typically load resources in page order so you wont delay other elements and with display:none you probably won't block rendering either.
Downside is you won't preload images defined in the CSS or #imports unless you preload them manually.
Please save my skin.
http://clubentertainment.ie/c/art-perf/embed_example.html
The above link should load in Firefox, doesn't load in anything. Doesn't appear to throw any errors. It even validates.
It is using swfobject, all of the links appear to work.. it just isn't actually working. I would like to blame the flash object but as it is working in Firefox the error must be somewhere else.
Any ideas? Is there an alternative way to embed and still have it working?
Furthermore wmode transparency isn't allowing the html dropdown to appear on top of the flash..
Not sure what happens to the bounty - I discovered the problem. The error was definitely with the server. Moved website, changed nothing else. Works just fine. I would just like to thank every one for their help.
I think it is problem with cross domain policy. Try to use relative path url instead of absolute path. You have absolute path now.
When putting the direct link to your swf it works on ie.
http://clubentertainment.ie/c/art-perf/CU3ER.swf
It can be a cross-site problem.
here the code used in CU3ER for demo http://getcu3er.com/features/
<script type="text/javascript">
var vars = { xml_location : '/inc/cu3er/config_features_overview.xml?v=2'};
var params = { wmode:'transparent' };
var attributes = { id:'CU3ER', name:'CU3ER' }; // give an id to the flash object
swfobject.embedSWF("/CU3ER.swf", "cu3er-container", "300", "390", "9.0.45", "/js/expressInstall.swf", vars, params, attributes );
</script>
EDIT:
by just putting your code in the body not the header I got the swf working in ie
<body >
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'http://clubentertainment.ie/c/art-perf/CU3ER-config.xml' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('http://clubentertainment.ie/c/art-perf/CU3ER.swf', "CU3ER", 500, 250, "9.0.45", "http://clubentertainment.ie/c/art-perf/js/expressInstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
// var CU3ER = new CU3ER("CU3ER");
</script>
<!-- CU3ER content HTML part starts here -->
<div id="CU3ER">
<noscript>
<!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
<p>Click to get Flash Player<br /><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
<p>or try to enable JavaScript and reload the page
</p>
</noscript>
</div>
<!-- CU3ER content HTML part ends here -->
</body>
I see it not working in Safari 5, but working in Firefox 4. Please try to embed using the SWFObject static publishing method so that you can rule out JavaScript as a potential issue:
<!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" lang="en" xml:lang="en">
<head>
<title>CU3ER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/c/art-perf/js/swfobject.js"></script>
<script type="text/javascript" src="/c/art-perf/js/CU3ER.js"></script>
<script type="text/javascript">
swfobject.registerObject("cu3er-container", "9.0.45", "/c/art-perf/js/expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="390" id="cu3er-container" class="CU3ER">
<param name="movie" value="/c/art-perf/CU3ER.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/c/art-perf/CU3ER.swf" width="300" height="390" class="CU3ER">
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
You may need to adjust your JavaScript to deal with either the 'cu3er-container' ID or the 'CU3ER' class. In this example, SWFObject is only called in if the version of Flash is insufficient so that it can provide the express installer for rapid upgrade, otherwise this does not require JavaScript.
You can always try to embed flash using valid techniques in XHTML. You can find more about this here: http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
As for swfobject, it seems it has some browser dependant issues. I'll try to figure this out later. I'll keep you posted if I come to any conclusions.
EDIT
Try to use relative paths to your swf file. It worked for me.
The SWF is loading just fine for me in Chrome 5.0.375.125, but the slideshow isn't loading. I suspect this may have to do with differences among how different web browsers are handling Javascript errors.
I enabled script debugging for Internet Explorer (I highly recommend doing this) and opened your page, and I immediately got a Javascript error in what appears to be Flash ExternalInterface calls to Javascript functions defined in CU3ER.js. Sometimes browsers decide to stop running scripts altogether when encountering an error, and some just continue. Firefox is in the "just continue" camp. When clicking "ignore" for errors in IE, IE was able to load images but continued to cause Javascript errors.
The Javascript errors appear to be occurring because CU3ER can't find itself in the DOM. This is based on the fact that this Javascript function call is emitted:
__flash__addCallback(document.getElementById(""), "playCU3ER");
That emitted function is defined like this:
function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
}
}
The fact that document.getElementById was called with an empty string may mean that there's some missing flash variable that CU3ER requires. Check the documentation for the SWF and make sure you have what's required when embedding. Or it could be a relative vs. absolute URL issue as the others have mentioned.