I am currently using a javascript embed method for flowplayer intallation.
$f("player", "{$cyburl}/flowplayer.swf" ,
{literal}
{
clip:
{
scaling: 'fit',
url: vid,
provider: 'nginx',
autoPlay: true
},
plugins:
{
nginx:
{
url: 'flowplayer.pseudostreaming.swf'
}
}
}
My users often say that they could not play a video. I think this is because javascript embed method. So i decided to embed it with object|embed method. But i can't write correct html code.
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config=???????????????????????????????' />
What should i write inside of config section to make it work properly ??
Thanks for advice
As you can see from the docs of Flowplayer Alternate embedding methods, what you need to do is passed in a config in the form of:
value='config={"clip":"http://blip.tv/file/get/N8inpasadena-Flowers457.flv"}'
There is one big difference between the embed code and the normal javascript that you have to always put a quote around any keys, e.g. the above clip you have to put "clip".
Apart from that, you just follow the same way you did for the standard javascript.
In our work, we usually prefer to use an external configuration file instead of putting all the bits into the flashvars tag.
You can use:
And then all you need to do is extract your configuration file out from your original code, and add quotes to the keys to this new somefile.js.
However back to your original question, I'm not sure why your user cannot play the video. If it's due to the javascript method, I doubt the embed will work. But you can have a try.
Related
I use flash player - flowplayer. and after using this player i need to remove it from my page. I use method unload(), but it does nothing. I tried to find question of this problem but find only this. But there are no aswers. Here we see that variable fp is steel exist
From looking at the flowplayer documentation on events for unload it states:
Unload: Unloads the player Flash component and replaces it with the original HTML content of the container element. This method does nothing if there was no HTML in the container.
Your example does not work because you have nothing within your container. Typically this is an image (splash screen). The user clicks on the image to start the video, the player is loaded. Unloading the player at the end then removes the player and replaces the image.
I have created a working demo here.
Example
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" />
</a>
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
onFinish: function() {
this.unload();
}
});
How can I programmatically add script or stylesheet tag to a page specified in page's YAML front matter (meta)?
Assuming there is src/documents/posts/a.html.eco with following contents:
---
layout: default
scripts: ['a.js']
---
Blog post that requires a special javascript
and layout src/layouts/default.html.eco with following contents:
...
#getBlock('scripts').toHTML()
</body>
...
The final result for posts/a.html should be:
...
<!-- some extra stuff that was added when processing script tag -->
<script scr="/scripts/a.js"></script>
</body>
...
..while other pages shouldn't have a reference to /scripts/a.js
The comment above tag is just to show that there may be some processing envolved before injecting the tag.
I tried many approaches using different events in docpad.coffee file (including approach taken from docpad-plugin-livereload plugin) but every time I was facing the same problem - script tag was applied to all pages instead of being applied to a.html only. Here is one of my tries:
renderDocument: (opts) ->
{extension,templateData,file,content} = opts
if extension == 'html' and scripts = file.get('scripts')
if typeof scripts != 'undefined'
scripts.forEach (scriptName) ->
#docpad.getBlock('scripts').add('<!-- custom script tag here -->')
I've also tried render event, populateCollections (which is not documented however I found it in docpad-plugin-livereload plugin) and even extendTemplateData events and no luck so far.
I know there is a method of doing this right inside a layout:
#getBlock('scripts').add(#document.scripts or [])
..which is totally fine and it really works as expected however it doesn't seem to provide enough freedom for me to manipulate the content before it's injected to a page.. And even if it's possible I won't like the idea of having some heavy logic inside layout template, I want it to be in a plugin/docpad.coffee
Hopefully that makes sense
Try templateData.getBlock('scripts').add instead of docpad.getBlock('scripts').add
I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>
trying to learn the Resources plugin
From my understanding, it helps to define 'resources' such as css and javascript files and automatically pull them into your gsp's when needed. I understand how to create modules that can then be loaded in using tags etc.
The part im not understanding is this: http://grails-plugins.github.com/grails-resources/guide/4.%20Using%20resources.html#4.2%20Linking%20to%20images
So ive created a module called 'images' in Config.groovy as follows:
grails.resources.modules = {
images {
resource url:'/images/view.jpg', attrs:[width: 1280, height:720 , alt: 'my view']
resource url:'/images/breakfast.jpg', attrs:[width: 1280, height:720, alt: 'breakfast']
}
}
The resources are included in the .gsp page in the head section as follows:
<head>
<r:require modules="jquery-ui, blueprint"/>
</head>
i know the resources have been successfully added to the head section because when i inspect the page source i see them there:
<link href="/ResourceTest/static/Aa7jV0N2qZjOz7TLZ9cl5cREIh2y5jJYV0ytn4nQg9r.jpg" rel="shortcut icon" width="1280" height="720" alt="my view" />
<link href="/ResourceTest/static/IpQBSjrYeLDdSUBGbP3jhf6Kkhvu1zV3XRtwWfKOIMn.jpg" rel="shortcut icon" width="1280" height="720" alt="breakfast" />
My question is this: how are the image resources then used? i mean i know if it was javascript, the importing of the resource gives you access to use the functions in the html code, but with regards to images, the site says "Once you have done this, using to reference them would automatically set the width, height and other attributes."
How? I've tried the following:
<r:img module="images">
<r:img alt="breakfast">
and a handful of others with no success
what does work is:
<r:img uri="/images/breakfast.jpg">
but this works regardless of whether or not you add the module with the r:require tag.. So whats the point of using this plugin for images then and how would i use it?
The <r:img> tag works just fine with our without <r:require>; it even works with undeclared image resources.
The point of the require tag is to prevent resource duplication. So, for instance, suppose you have multiple javascript resources that rely on jQuery, and they're all required. Add another layer of complication: say you're actually pulling together different gsp templates via sitemesh, and they each have their own resource dependencies. If you just put the normal HTML code to reference those resources in the head of each gsp layout, you might get multiple instances of them in your page header, which could prove problematic. Using the resources plugin makes sure you only get one instance of the required resource.
See http://grails-plugins.github.io/grails-resources/ref/Tags/require.html and http://grails-plugins.github.io/grails-resources/ref/Tags/layoutResources.html.
With images, though, this is not really necessary. If you have an image more than once on a page, it's probably because you wanted it, or because you're applying redundant layouts and need to refactor a bit. So, you are correct that the require tag doesn't really do much for images called via <r:img>. This is simply because images are a different sort of resource, so they're treated differently. Don't sweat it. :)
I am writing a firebreath plugin that is supposed to display some object.
There are many cases of failure, since it is communicating with local software.
In case of a failure I want to close the plugin and to display a regular image instead. Or to get an image URL as a parameter, to parse the file and display it.
Both options are acceptable.
So-
What is the better option?
How do I totally close the plugin?
How do I parse parameters that are passed form the object tag?
I tried plugin->getParam("Name"), but didn't get the valueI passed.
How do I do it?
Assuming your HTML looks something like this:
<div id="plugincontainer">
<object id="myplugin" type="application/x-myplugin" width="100" height="100">
</object>
</div>
You should be able to remove the plugin like this:
document.GetElementById('plugincontainer').innerHTML = "";
Or if you're using jQuery:
$("#plugincontainer").empty();
This will result in a call to onWindowDetached inside of Firebreath where you can unload your code.
You're then able to add new HTML into the DOM:
$("#plugincontainer").append("<img src='images/my.jpg' />");