Using flowplayer videos in RoboHelp 9

Report · Jan 10, 2012

Hi folks.

I'm having real difficulty with intalling flowplayer into RH9 topics. I've followed many of the options on the flowplayer website and all of them seem to fail after they have been added to the RoboHelp topic. The code below takes a hyperlink to the video and then loads it into a player that displays at 100% of the frame (this is controlled by a separate css file).

The code I'm using is (approximately):

<body>

{src: 'http://rss.serif.com/rss/flowplayer/flowplayer.commercial-3.1.1.swf', wmode: 'transparent'},{

clip: { scaling: 'fit' },

});</script>

</body>

The css snippet is as follows:

html, {height:100%;}

a.inline-video {

display:block;

width:100%;

height:100%;

margin:0 auto;

text-align:center; }

body {

height:100%;

font-family:Verdana;

font-size:9pt;

background-color:#ffffff; }

This works fine when previewed and when added by hand to an output file. However, I really need to be able to put this into a topic and generate the webhelp on an ad hoc basis.

I have three main problems. The first is that Robohelp removes the code that it doesn't understand and often adds it's own to replace it. Before upgrading to 9 I managed to get around this by ensuring that once created, the file wasn't reopened but this doesn't help if you accidentally open it for some reason.

The second issue I have is that when the file is generated, Robohelp insists on specifying the javascript lang version as 1.2. This is completely incorrect.

My third issue is that although I can con RH9 into generating the html by not reopening the topic after it's been edited, it doesn't work if I add breadcrumb links to the bottom of the topic instead of the top. The video simply won't display at all.

The path to the javascript file in the header seems to remain unchanged as expected apart from again adding a lang version on export.

Has anyone else tried this? I'm really desperate to find a workable solution.

Thanks and Regards,

Caroline

Report · Jan 10, 2012

Hi Caroline

I'm thinking that for this situation you will need to create some specialized JavaScript that performs a "write in" of the code you need. It's not overly difficult to create, but it is a bit on the fussy side. I'll do my best to offer what I can here. Likely Willam will have another opinion or be offer a slicker and easier to implement approach.

Forums to Willam. Hello Willam. Are we reaching you, Willam?

Basically the code would look something like this:

document.write('<script type="text/javascript">flowplayer("player",');

document.write('{src: 'http://rss.serif.com/rss/flowplayer/flowplayer.commercial-3.1.1.swf',');

document.write('wmode: 'transparent'},{');

document.write('clip: { scaling: 'fit' },');

document.write('});</script>');

You would begin by clicking Insert > HTML > Advanced > Script. Then pasting that code. But there would likely be more tweaking than that involved. And that's where I'm hoping Willam can pop in and offer some advice.

Cheers... Rick

Helpful and Handy Links

RoboHelp Wish Form/Bug Reporting Form

Begin learning RoboHelp HTML 7, 8 or 9 within the day!

Adobe Certified RoboHelp HTML Training

SorcerStone Blog

RoboHelp eBooks

Report · Jan 10, 2012

Yeah yeah, you reach me... But you seem so able all on your own

What exactly is changed by RoboHelp? It should leave the <a> alone and it doesn't change your scripts. I've used inline style blocks without problem in RH8.
Yes, the attribute is depracated, but it does it break your script? I've never heard of that attribute doing that.
Please answer question 1 first.

You can indeed use JavaScript to 'inject' the code into your HTML. But try adding the code you provided by the way Rick suggested: Insert > HTML > Advanced > Script

Greet,

Willam

Report · Jan 11, 2012

Thanks for replying Rick and Willam, really appreciated.

In answer to question 1, RoboHelp completely removes the a tag! I'm assuming it's because it doesn't like the fact that it's empty. Sorry, should have mentioned that earlier. I just don't seem to be able to stop it doing so and I can't add any text because it then obviously becomes a hyperlink that the User needs to click rather than loading the video on frame load.

The script itself is left alone until it's published when it then adds the lang version. Some of the developers I've spoken too aren't convinced by this as I seem to be getting compatibilty problems across IE9, Firefox and Chrome and they they that it might be because the version specified doesn't support the code. I confess that I know little of javascript myself so I couldn't say one way or the other...

I'll try to add the script via insert (although, I'm fairly certain I've tried this before). It still leaves me with the a tag problem though.

I eagerly await your response (cos I'm totally outta ideas meself!!)

Thanks, Caroline

Report · Jan 12, 2012

Hi,

The language attribute is not used in XHTML so the browsers *should* ignore it. Can you add the hyperlink with the script?

//This creates the link

document.write('<a class="inline-video" href="http://pathtomymovie.mp4" id="player"></a>');

//The code required by the player

flowplayer("player",

{src: 'http://rss.serif.com/rss/flowplayer/flowplayer.commercial-3.1.1.swf', wmode: 'transparent'},

{clip: { scaling: 'fit' },}

);

</script>

Greet,

Willam

Report · Jan 17, 2012

Hi Willam,

Sorry about not replying sooner, I've had difficulty getting online since my last post!

Thanks for your input, I did try it but couldn't get consistent results. However, I have found a way that works (and that RoboHelp accepts without complaining). In case anyone else ends up with a similar problem, here's the code:

This need to go somewhere in the <head> </head> section.

<body>

<!-- Create player container complete with splash image. I ended up having to have a splash image due to some compatibility problems with FireFox. It 'should' also work by removing this and
<div id="player" class="inline-video">

instead simply leaving the DIV tag empty -->

<script type="text/javascript">flowplayer("player", {src: "http://pathtoflowplayer/flowplayer.commercial-3.1.1.swf", wmode: 'transparent'},

                {
                //Set Product Key
                key: '#$xx00x0xxx0000xxx0x0',

                //Setup Clip options
                clip: {
                // in url: only change folder and filename to match video file path
                                url: "http://pathtovideo/myvideo.mp4",
                                autoPlay: true,
                                autoBuffering: true,
                                scaling: "fit"
                },

                //Setup Play options
                play: {
                                label: null,
                                replayLabel: "click to play again"
                }

}
);</script>
</body>
</html>

The following css tells the splash image and player to resize to the browser (or frame) and ensures that the player controls are always visible:

/* ensures that the html page and body is reset to 100 percent */
html, body {height:100%;}

/* styling for the actual flowplayer container */
div.inline-video {
            display:block;
            width:100%;
            height:84%;
            margin:0 auto;
}

/* styling for splash image */
img.splash {
   width:100%;
   height:auto;
}

(This code leaves RoboHelp feeling all warm and fuzzy and it doesn't feel the need to butcher it on output.) My thanks to everyone that has looked into this for me and I hope that it may prove useful to others in the future.

Many thanks,

Caz

Adobe Community

Using flowplayer videos in RoboHelp 9