Flowplayer - splash screen for video container using Flashembed - javascript

Although there is plenty of information on the web regarding splash images in Flowplayer, I am having difficulty finding anything useful when using Flashembed to embed video. Here is what I have, which does not work:
<script language="JavaScript">
flashembed("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
splash: true,
clip: {
autoPlay: false,
autoBuffering: true,
playlist: [{url:"images/home-video-splash.jpg"}, {url: "http://myWebsite.com/video/myVideo.flv"}]
}
}
});
</script>
Any help would be greatly appreciated!

HAH! What a simple solution, rcdmk - you were right, and I also had some of my .js turned around the wrong way. So with your suggestion, and some proper syntax, which is always helpful, here is what I ended up with that now works:
<img src="images/home-video-splash.jpg" />
<script language="JavaScript">
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
clip: {
playlist: [
{
url: 'images/home-video-splash.jpg'
},
{
url: 'http://myWebsite.com/video/myVideo.flv',
autoPlay: false,
autoBuffering: true
}
]
}
}
});
</script>

Related

Mathjax automatic linebreak when opened in a modal

For a math project, the solution of a problem should be displayed in a Sweetalert2 modal. Unfortunately although using
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]
},
"HTML-CSS": {
linebreaks: { automatic: true }
},
SVG: {
linebreaks: { automatic: true }
}
});
</script>
the automatic line break is not working in a Sweetalert2 modal (see image). Is there any fix for that.
With best greeting, Leon
It looks like your code is rendered in different from HTML-CSS and SVG processor (most likely a Common HTML). Try adding more configs, like:
CommonHTML: {
linebreaks: { automatic: true }
},
PreviewHTML: {
linebreaks: { automatic: true }
}
EDIT
You are also able to specify the output processor by hand with
MathJax.Hub.Register.StartupHook("End Jax", function () {
return MathJax.Hub.setRenderer("HTML-CSS");
});
You can check more possibilities to determining right processor here

How to wait for page to load befor Reveal.js starts

I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()

JWPlayer load() and playAd() not starting using onBeforeStart()

I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)

Completely failing to grasp SoundManager's scope (with examples)

Apologies for no Fiddle; just trying to understand SoundManager 2's basics and failing miserably.
Why doesn't this work:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
// Ready to use; soundManager.createSound() etc. can now be called.
}
});
</script>
<script>
$(document).ready(function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/sound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
});
</script>
But this does:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/mySound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
}
});
</script>
I don't get it... at all. Does every sound have to be loaded into onready()? And if so, how is that remotely useful for 90% of use cases? I have to be missing something. The examples they provide make it seem as easy putting this anywhere in my code:
soundManager.createSound({
id: 'mySound2',
url: 'audio/mySound2.mp3'
});
soundManager.play('mySound2');
Yet it doesn't work. Why?
From the comments
The API properbly need to do some thing on intialize and before it is ready to run. If you call createSound before the API have finished loading there will be a error. Instead of using $(func..) as you starting point, you could try using the onready, and call the $(functio.. from inthere
I have made a non-working fiddle of what i mean: http://jsfiddle.net/YdC8j -- I have not working with soundmanager I am just guessing

Changing Twitter logo in twitter feed

Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.

Categories