Hi! I’d like to use JW Player in my application. To install it I have to add
<script type="text/javascript" src="/VAADIN/js/jwplayer.js"></script>
in the head section and then
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "player.swf",
file: "video.mp4",
height: 270,
width: 480
});
</script>
in the body
To add necessary script in the head I just did something like this (the code is in Scala):
package com.vocab
import com.vaadin.terminal.gwt.server.ApplicationServlet
import java.io.BufferedWriter
import javax.servlet.http.HttpServletRequest
class MainServlet extends ApplicationServlet {
protected override def writeAjaxPageHtmlHeader(page: BufferedWriter, title: String, themeUri: String, request: HttpServletRequest) {
super.writeAjaxPageHtmlHeader(page, title, themeUri, request)
page.write(
"""
|<script type="text/javascript" src="/VAADIN/js/jwplayer.js"></script>
|""".stripMargin)
}
}
It works great. The script line is added to header and I can display it by clicking on it in source view.
The second part is the body part. To implement it I used CustomLayout as follows:
class LessonIntroductionExercise(val lessonScreen: LessonScreen) extends VerticalLayout {
val playerCustomLayout = new CustomLayout {
templateContents =
"""
|<div id="container">Loading the player ...</div>
|<script type="text/javascript">
|jwplayer("container").setup({
|flashplayer: "player.swf",
|file: "video.mp4",
|height: 270,
|width: 480
|});
|</script>""".stripMargin
}
def deployElements() {
add(playerCustomLayout)
}
deployElements()
}
I can see the div but JW Player doesn’t display. When I use Firebug to debug JavaScript I get an error “jwplayer is not defined” (notwithstanding including it in the header). Player.swf and video.mp4 are in “webapp/VAADIN/themes/reindeerCustom/layouts/” (reindeerCustom is my theme). The script is in “webapp/VAADIN/js”.
Does anybody have any idea why it might be and what to do about it? I would be extremely grateful for any help.