PDA

View Full Version : Streaming Video as Javascript Link



zimmerj
30 Jan 2012, 1:48 PM
I need to embed a Javascript streaming video player into an Ext panel. The link will place an image button to start the video when pressed. I tried the panel's html parameter. The link works fine on a plain html file. I am at a loss to determine the correct way to do this in Sencha. I'm sure there is a straight forward way to do this, but it is eluding me at the moment.

Tried this for panel:

html: '<script type="text/javascript" src="http://www.somevideoserver.com?txt=welcome&ID=welcome_348"></script>',

mitchellsimoens
30 Jan 2012, 1:51 PM
In the normal HTML page, it will update the element it's in or the whole page?

zimmerj
30 Jan 2012, 1:54 PM
The video player updates the element, not the entire page.

Also, I have never tried to embbed javascript in the HTML parameter. Should that work in general?

mitchellsimoens
30 Jan 2012, 1:56 PM
It's not the way I would do it. I would have a way to specify what element to render it in.

zimmerj
30 Jan 2012, 2:03 PM
Can you provide some more detail to point me the right direction. I have no control over the way the streaming link is defined. Are you talking about adding a DIV to the html for example, or overriding a rendering method on the panel? In general, should the html parameter be able to handle javascript tags, or are you saying that Javascript should not be placed in the html tag?

zimmerj
31 Jan 2012, 5:55 PM
I solved this problem by wrapping the link in an iFrame. This html string was then passed into the panel's html parameter. YouTube videos can be played this way as well. See example below:

var welcomeVideoHTML = '<div style="margin: 10px 10px 10px 20px">' +
'<div style="width=100%; margin-bottom: 5px; color:#000000; font-weight: bold; font-size: 16px;text-align:center;"><br>Welcome Video</div><br>' +
'<div><iframe class="powerstream" type="text/html" src="http://www.somevideoserver.com?iplay=1&ID=Welcome_345" frameborder="0"></iframe></div><br>' +
'</div><br><br>';